AI全栈第十五天：Mine界面与AI头像生成，奇趣体验？

👋 Hello 掘金的同学们！ 欢迎回到我们的 AI全栈开发 系列教程！今天我们要一起探索如何在个人中心页面实现一个酷炫的 AI 头像生成功Neng。准备好了吗？让我们开始吧！🚀

在移动端应用中，个人中心通常是用户管理自己资料的地方。为了让体验geng加丝滑，我们选择了 Shadcn UI 提供的 Drawer组件。下面是一个简单的代码示例：

import { 
  Drawer,
  DrawerTrigger,
  DrawerContent,
  DrawerHeader,
  DrawerTitle,
  DrawerDescription,
  DrawerFooter,
  DrawerClose
} from '@/components/ui/drawer';
// 👇 open 和 setOpen 用于手动控制抽屉状态
<Drawer open={open} onOpenChange={setOpen}>
  {/* 👆 . 触发器区域 */}
  <DrawerTrigger asChild>
    {/* asChild 表示 Trigger 不会多渲染一个 button，而是直接把点击事件绑定到下面的 div 上 */}
    <div className="h- w- rounded-full bg-primary/ flex items-center justify-center text-primary text-xl font-bold">
      <Avatar className="h- w-">
        <AvatarImage src={user?.avatar} />
        <AvatarFallback className="bg-primary/ text-primary text-xl font-bold">
          {user?.name?..toUpperCase}
        </AvatarFallback>
      </Avatar>
    </div>
  </DrawerTrigger>
  {/* 📄 . 抽屉内容区域 */}
  <DrawerContent>
    <div className="mx-auto w-full max-w-sm">
      {/* 🏷️ 头部：告知用户这是干嘛的 */}
      <DrawerHeader className="text-left">
        <DrawerTitle>修改头像</DrawerTitle>
        <DrawerDescription>
          请选择一种方式geng新您的个人头像
        </DrawerDescription>
      </DrawerHeader>
      {/* ✨ 核心操作区：三个按钮 */}
      <div className="p- space-y-">
        {/* 📸 选项一：拍照 */}
        <Button 
          variant="outline" 
          className="w-full justify-start h- text-base" 
          onClick={ => handleAction}
       >
          <Camera className="mr- h- w- text-blue-"/>
          拍照
        </Button>
        {/* 🖼️ 选项二：从相册上传 */}
        <Button 
          variant="outline" 
          className="w-full justify-start h- text-base" 
          onClick={ => handleAction}
       >
          <Upload className="mr- h- w- text-blue-"/>
          从相册上传
        </Button>
        {/* 🤖 选项三：AI 生成头像  */}
        <Button 
          variant="outline" 
          className="w-full justify-start h- text-base bg-gradient-to-r from-purple- to-indigo- border-none"
          onClick={ => handleAction}
       >
          {/* Sparkles 图标非常适合 AI 这种神奇的功Neng */}
          <Sparkles className="mr- h- w- text-yellow-"/>
          AI 生成头像
        </Button>
      </div>
      {/* 🦶 底部：取消按钮 */}
      <DrawerFooter className="pt-">
        <DrawerClose asChild>
          <Button variant="ghost" className="w-full h-">取消;C;/Button>
        /DrawerClose>
      
    
  

当用户点击“AI 生成头像”按钮时后台发生了什么？让我们一起揭开这个魔法的面纱！🔮

我们使用 OpenAI 的 DALL-E 接口来生成图像。在AiService中定义了一个方法avatar,它负责向DALL-E发送请求并返回生成的图像URL。

async avatar {
    const imageUrl = await this.imageGenerator.invoke;
    return imageUrl;
}

 设计亮点:

封装性:        . 我们将业务逻辑封装在 Store 中,而不是直接写在组件里。

NestJS作为后端框架,提供了清晰的结构和强大的功Neng。我们创建了一个AiController来处理前端的请求,并调用AiService中的方法来生成头像。

@ Controller export class AiController {
    constructor {}
    @Get
    async avatar name: string) {
        return this.aiService.avatar;
}

Mine 界面设计: 我们使用 Shadcn UI 的Drawer 组件创建了一个优雅的个人中心界面。

AI 头像生成: 通过调用 OpenAI 的 DALL-E 接口,我们实现了根据用户姓名生成个性化头像的功Neng。

前后端协作: 前端通过 HTTP 请求与后端 NestJS 服务进行交互,实现了完整的 AI 头像生成流程。

不知不觉我们Yi经一起走过了第15天。半个月的坚持,从零开始搭建项目,现在的你是不是感觉前后端的交互越来越顺手了?这种打通任督二脉的感觉简直太棒了!�&#dd2e;

@Controller
export class AiController {
    constructor {}
    @Get
    async avatar name: string) {
       return this.aiService.avatar;
   }
}

// frontend/notes/src/api/user.ts
import instance from './axios-instance';
export const getAiAvatar =  => {
   // 发送 HTTP GET 请求
   // 注意：这里我们使用 GET 请求，把 name 作为查询参数传递
   return instance.get;
}

// frontend/notes/src/store/useUserStore.ts
aiAvatar: async  => {
   // 获取当前用户信息
   const name = get.user?.name;
   // 调用 API 生成头像  
   const avatar = await getAiAvatar;
   // geng新 store 中的 user 状态   
   set({
       user: { ...get.user, avatar }
})}