根据用户输入生成结果，支持Latex表达式渲染。

可上传图片作为上下文进行对话。

支持图表渲染。

OpenAI模型下具有显示词元概率功能，可获取当前选中词元的概率，提供多个备选词元及概率。

1. 互动聊天界面

   • 实时 Markdown 编辑和预览
   • 基于角色的对话
   • 用户可上传图片用于对话
   • OpenAI模型下可显示词元概率
   • 高级消息操作：重新排序、复制、重新生成
   • 专家模式：增强的编辑和角色控制
   • 无缝用户体验的反馈和动画
   • 模型配置和 AI 参数调整
   • 响应式和可访问的设计

2. 丰富文本编辑器

   • 支持 GitHub 风格的高级 Markdown
   • 支持 LaTeX 表达式的 KaTeX
   • 支持 Mermaid 图表渲染
   • 持久化内容和实时渲染

3. 现代用户体验

   • 可定制和响应式的 UI
   • 动画、通知和错误处理
   • 移动友好且可访问的组件

4. 高级功能

   • IndexedDB 持久化，多语言支持
   • API 集成和消息历史管理
   • 高级日志记录和优化的 API 处理
   • 国际化和动态翻译

• 框架: Next.js 14
• 语言: TypeScript
• 样式: Tailwind CSS, Radix UI
• 状态管理: Jotai
• 数据存储: IndexedDB with Dexie.js
• 国际化: next-intl

src/
├── actions/
├── app/
├── components/
│   ├── playground/
│   └── ui/
├── constants/
├── db/
├── hooks/
├── i18n/
├── stores/
├── styles/
└── utils/

• Node.js (LTS 版本)
• pnpm 或 npm
• 302.AI API 密钥

1. 克隆仓库：

   git clone https://github.com/xiaomizhoubaobei/LLM-Playground
   cd LLM-Playground
   

2. 安装依赖：

   pnpm install
   

3. 配置环境变量：

   cp .env.example .env.local
   

   • AI_302_API_KEY: 您的 302.AI API 密钥
   • AI_302_API_URL: API 端点

启动开发服务器：

pnpm dev

访问 http://localhost:3000 查看应用。

pnpm build
pnpm start

• DockerHub: qixiaoxin/iflow-cartoonize-api
• GitHub Container Registry: ghcr.io/xiaomizhoubaobei/llm_playground
• 阿里云: crpi-wk2d8umombj539de.cn-shanghai.personal.cr.aliyuncs.com/xmz-1/302_llm_playground

# 使用 DockerHub 镜像
docker pull qixiaoxin/iflow-cartoonize-api:latest
docker run -p 3000:3000 qixiaoxin/iflow-cartoonize-api:latest

# 使用 GHCR 镜像
docker pull ghcr.io/xiaomizhoubaobei/llm_playground:latest
docker run -p 3000:3000 ghcr.io/xiaomizhoubaobei/llm_playground:latest

# 使用阿里云镜像
docker pull crpi-wk2d8umombj539de.cn-shanghai.personal.cr.aliyuncs.com/xmz-1/302_llm_playground:latest
docker run -p 3000:3000 crpi-wk2d8umombj539de.cn-shanghai.personal.cr.aliyuncs.com/xmz-1/302_llm_playground:latest

docker build -t llm_playground .
docker run -p 3000:3000 llm_playground

⚠️ 重要: Docker 镜像运行时需要传入真实的 302.AI API 密钥才能正常工作。

docker run -d \
  -e AI_302_API_KEY=your-actual-api-key \
  -e AI_302_API_URL=https://api.302.ai \
  -e NEXT_PUBLIC_AI_302_API_UPLOAD_URL=https://dash-api.302.ai/gpt/api/upload/gpt/image \
  -p 3000:3000 \
  llm_playground:latest

环境变量说明：

变量名	说明	必需
AI_302_API_KEY	302.AI API 密钥	✅ 是
AI_302_API_URL	API 服务地址	✅ 是
NEXT_PUBLIC_AI_302_API_UPLOAD_URL	文件上传地址	✅ 是

获取 API 密钥：https://302.ai/apis/

欢迎贡献！请随时提交问题和拉取请求。

本项目根据 GNU Affero General Public License v3.0 许可。详情请参阅 LICENSE 文件。

---

使用 Next.js 和 302.AI 构建 ❤️