这是提交给The Pinata Challenge的内容

我做了一个叫 Image Thing 的应用，帮助网页开发者简化生成 img 标签，并允许他们上传图片，将文件固定在 IPFS 上，生成 img 标签，

在这个演示里，你可以看到：

1. 用户验证。
2. 检查文件以确保仅上传图片，不包括PDF。
3. 成功上传图片，并自动生成说明。
4. 为未固定的文件生成预签名链接，并在新标签页中打开。
5. 固定图片并生成一个img标签。
6. 取消固定文件并删除。

在GitHub上的h93xV2 / image-thing

这是一使用create-next-app初始化的Next.js项目。

这个项目是为了Pinata挑战而创建的；它是一个应用程序，结合了Pinata的文件存储API和OpenAI的大型语言模型，提供了专为图片文件定制的独特功能。

• Pinata
• OpenAI
• Supabase
• Next.js

数据库(DB)

首先，你需要建立一个数据库。这个应用使用的是Supabase。接下来，你需要设置一个包含以下列的表，它们分别是：

1. id:int8
2. created_at:时间戳
3. upload:jsonb
4. hash:文本
5. user_id:uuid
6. is_pinned:布尔
7. pinata_id:文本
8. pinata_cid_private:文本
9. pinata_cid_public:文本

之后，需要为 SELECT（查询）、UPDATE（更新）、INSERT（插入）和 DELETE（删除）创建策略来，以确保只有授权用户才能访问表中的行。还需要启用行级安全（RLS）。

环境变量简介

以下是一些需要创建的环境变量：

1. PINATA_JWT <!-- 表示 PINATA 的JWT令牌 -->
2. PINATA_GATEWAY <!-- 表示 PINATA 的网关地址 -->
3. OPENAI_API_KEY <!-- 表示 OpenAI 的API密钥 -->
4. NEXT_PUBLIC_SUPABASE_URL <!-- 表示公开的 Supabase URL -->
5. NEXT_PUBLIC_SUPABASE_ANON_KEY <!-- 表示公开的 Supabase 匿名密钥 -->

启动:

首先，启动开发服务器：

# 保持原样，未提供具体命令。

    npm run dev
    #
    （这是一个npm命令，用于启动开发服务器。npm是Node.js的一个包管理工具）

请提供需要翻译的英文文本，否则我无法继续翻译工作。

进入全屏模式 退出全屏模式

查看 GitHub 项目

用户上传图片时，系统会自动使用OpenAI的聊天完成API生成alt文本和描述。默认情况下，图片会上传到Pinata Files API，这意味着图片仅供私人使用。如果用户想查看图片，他们可以点击一个按钮生成一个预签名URL，该URL将在新标签页中打开。

如果用户想让图片公开，他们可以通过Pinata Web3文件API将文件固定到IPFS。一旦图片被公开，用户可以点击一个按钮来自动生成一个带有预填IPFS URL和alt文本的img标签。

在后台，我们使用Supabase来处理用户身份验证，并跟踪每个用户的上传情况。进行图像哈希处理以防止用户上传重复文件。在前端，我们还利用Supabase根据用户操作快速更新UI状态。例如，我们可以看到在进行不同操作时，文件统计信息实时更新。

这个应用程序是用NextJS和TypeScript开发的，并以MIT许可证发布。