用React和Moonshot API打造一个图片识别小助手：今天我又让电脑学会了"看图说话"

我想说一句
104 阅读7分钟

引言：当图片开始"说话"

各位前端探险家们，今天我要给大家讲一个让图片"开口说话"的神奇故事！想象一下：你上传一张照片，然后它就能自动告诉你照片里有什么——是不是像变魔术一样？但这不是魔法，而是React + Moonshot API的完美组合！今天，我就带大家一步步揭秘这个神奇的过程，保证让你笑着学会这些技术！

项目蓝图：我们的魔法工具箱

先来看看我们打造这个"看图说话"小助手需要哪些工具：

  1. React：我们的魔法舞台，所有"表演"都在这里发生
  2. Moonshot API：给图片"配音"的智能大脑
  3. FileReader API：让图片"变身"的魔术师
  4. useState钩子：我们的状态管理器，负责记住所有"剧情"
// 我们的魔法启动器
import { useState } from 'react'

function App() {
  // 记忆水晶球（状态管理）
  const [content, setContent] = useState('') // 存储AI的"解说词"
  const [imgBase64Data, setImgBase64Data] = useState('') // 存储图片的"魔法变身"
  const [isValid, setIsValid] = useState(false) // 判断魔法是否准备就绪
}

这也就是我们常说的数据状态，用数据驱动视图

第一章：图片的"魔法变身术"

1.1 文件输入：打开魔法之门

要让图片"说话"，当然要建立在能上传图片的基础上，首先得让它进入我们的魔法世界。这里我们使用了HTML的<input type="file">作为我们的"魔法传送门"：

<label htmlFor='fileInput'>文件：</label>
<input
  type="file"
  id='fileInput'
  className='input'
  accept='.jpeg,.jpg,.png,.gif' // 只允许特定魔法物品（图片）进入
  onChange={updateBase64Data} // 当新物品进入时触发魔法
/>

这里有几个有趣的魔法细节：

  • htmlFor：这是React版的for属性，让点击标签就能触发文件选择（无障碍访问的魔法！）
  • accept：我们的"门卫"，只允许.jpg/.png等图片格式进入
  • className：因为class在JavaScript中是保留字，所以我们用这个"代号"

能够优化用户的体验，防止用户提交其他文件

1.2 Base64：图片的"魔法语言"

图片进入后，我们需要把它转换成AI能理解的"语言"——Base64。这就像给图片穿上了一件字母和数字编织的"魔法外衣"：

const updateBase64Data = (e) => {
  const file = e.target.files[0] // 从传送门取出魔法物品
  if (!file) return // 防止空手而归
  
  const reader = new FileReader() // 召唤我们的魔法翻译官
  reader.readAsDataURL(file) // 开始翻译！
  
  reader.onload = () => {
    setImgBase64Data(reader.result) // 保存翻译结果
    setIsValid(true) // 激活"说话"按钮，这就是我们之前设置好的数据状态
  }
}

  • 创建一个 FileReader 实例，它是浏览器提供的 API，用于异步读取文件内容。

  • readAsDataURL(file) 表示以 Data URL（Base64 格式）  读取文件内容。

想象一下，FileReader就像一位语言大师，把图片的"视觉语言"翻译成由字母、数字和符号组成的Base64"咒语"。

第二章：与AI大脑对话

2.1 准备魔法仪式

有了图片的"咒语"，我们现在可以召唤AI大脑——Moonshot API了。但首先，我们需要准备好仪式用品：

const update = async () => {
  if (!imgBase64Data) return // 没有咒语无法施法
  
  // 设置祭坛（API端点）
  const endpoint = 'https://api.moonshot.cn/v1/chat/completions'
  
  // 准备祭品（请求头）
  const headers = {
    'Content-Type': 'application/json',
    'Authorization': `Bearer ${import.meta.env.VITE_API_KEY}`
  }
  
  // 告诉用户仪式开始
  setContent('正在生成中...')
  
  // 开始召唤仪式...
}

这里有个关键点：import.meta.env.VITE_API_KEY是我们的"秘密咒语"，存储在.env.local文件中，避免被外人偷看！

环境变量 代码运行时可以和环境变量交互把env 写到代码里面，所以我们写到.env.local 里面 再通过import.meta.env 读取 我们的token

2.2 与AI的"对话"结构

我们需要告诉Moonshot API两件事：

  1. 这里有一张图片（Base64格式）
  2. 请描述它
// 继续我们的仪式...
const response = await fetch(endpoint, {
  method: 'POST',
  headers,
  body: JSON.stringify({
    model: 'moonshot-v1-8k-vision-preview', // 选择强大的AI模型
    messages: [
      {
        role: 'user', // 我们是用户
        content: [
          {
            type: 'image_url',
            image_url: {
              'url': imgBase64Data // 这是我们的图片"咒语"
            }
          },
          {
            'type': 'text',
            'text': '请描述图片的内容', // 我们的问题
          }
        ]
      }
    ]
  })
})

2.3 接收AI的"智慧结晶"

仪式完成后，AI会给我们一个"智慧卷轴"（响应），我们需要解读它：

// 解读卷轴
const data = await response.json()

// 取出AI的"解说词"
setContent(data.choices[0].message.content)

数据路径其实我们是能在Moonshot api 的文档都能够查询到，不必担心

image.png

第三章：魔法舞台的搭建

3.1 预览区：图片的"展示台"

用户上传图片后，需要立即看到它，这就像魔术师展示道具一样重要：

<div className="preview">
  {imgBase64Data && <img src={imgBase64Data} alt="" />}
</div>

这里用imgBase64Data &&这个小技巧，只有存在Base64数据时才显示图片——避免空舞台的尴尬！

还有隐藏的知识点，base64编码格式可以作为图片的src

3.2 解说区：AI的"演讲台"

<div>
  {content}
</div>

这个简单的{content}就是AI解说词的展示区，从"正在生成中..."到最终描述都在这里显示。

3.3 提交按钮：启动魔法的"开关"

<button onClick={update} disabled={!isValid}>提交</button>

disabled={!isValid}这个属性让按钮在没有图片时处于"休眠状态"，避免用户空按按钮的失望。

这里也充分的体现了react数据状态的概念

第四章：魔法原理深度解析

4.1 状态管理的魔法：useState钩子

React的useState就像是我们的魔法记忆水晶球：

const [content, setContent] = useState('')
  • content：水晶球当前显示的内容
  • setContent：改变水晶球内容的咒语
  • useState('')：初始化水晶球为空白

当我们调用setContent('新内容')时，React会自动更新UI，就像水晶球瞬间显示新画面一样神奇！

所以可见数据状态在react是很重要的

4.2 异步魔法：async/await vs .then()

与AI对话是个"慢动作魔法"，我们有两种方式处理：

// 方式1：.then()（传统咒语）
fetch(endpoint).then(response => {
  return response.json()
}).then(data => {
  // 处理数据
})

// 方式2：async/await（现代咒语）
const response = await fetch(endpoint)
const data = await response.json()

为什么选择async/await？因为它让异步代码看起来像同步代码，就像把复杂的魔法步骤简化成一句咒语！

4.3 环境变量：保护我们的秘密咒语

import.meta.env.VITE_API_KEY是我们保护API密钥的秘密武器：

  1. 在项目根目录创建.env.local文件
  2. 添加VITE_API_KEY=你的实际API密钥
  3. 在代码中通过import.meta.env.VITE_API_KEY访问

这样，我们的秘密咒语就不会暴露在代码仓库中，避免被邪恶巫师偷走！

第五章：魔法表演中的小插曲

5.1 严格模式的双重渲染

在开发过程中，你可能会看到：

console.log('这条消息打印了两次！')

这不是你的代码有问题，而是React的严格模式(StrictModel) 在搞鬼！它故意渲染两次，帮你发现潜在问题，就像彩排两次确保正式表演完美。

5.2 无障碍访问：魔法的普世价值

<label htmlFor='fileInput'>文件：</label>
<input id='fileInput' />

这里的htmlFor(相当于HTML的for)让点击标签就能聚焦输入框，这对使用屏幕阅读器的用户非常重要——让魔法惠及所有人！

5.3 用户体验的微妙魔法

几个提升用户体验的小细节：

// 上传期间显示提示
setContent('正在生成中...')

// 限制文件类型
accept='.jpeg,.jpg,.png,.gif'

// 禁用无效按钮
disabled={!isValid}

// 禁止缩放
user-scalable=no

这些就像魔术表演中的暖场词，让观众知道表演正在进行中，而不是冷场。这对用户的体验和web安全都是非常重要的点

最后来看看我们的最终结果

image.png

结语：你已掌握"看图说话"的魔法

回顾今天的魔法课程，我们学会了：

  1. 图片的Base64变身术：使用FileReader将图片转换为AI能理解的"语言"
  2. 与AI的对话仪式：通过Moonshot API让图片"开口说话"
  3. React的状态管理魔法：使用useState钩子管理应用状态
  4. 用户体验的微妙艺术：实时反馈、按钮状态管理等

现在，你可以自豪地说："我让图片开口说话了！" 虽然你的朋友可能会用异样的眼神看你，但你确实掌握了一项酷炫的技术！

avatar
文章
阅读
粉丝