Gradio Winter Hack

🎨 Gradio冬季黑客-代码编辑器+AI助手

由Gradio 6、Playwright和Gemini API提供人工智能辅助的强大多模式代码编辑器。

特性

1. 代码编辑器应用程序（Gradio）

• 用于HTML、CSS和JavaScript编辑的多标签界面
• 语法高亮显示和代码格式化
• 使用Playwright生成实时预览
• 渲染代码的实时截图

2. MCP服务器（Gradio）

• 基于Gradio的人工智能逻辑MCP服务器
• 与Gemini API集成以实现智能代码生成
• 视觉和语音转文本功能
• 用于编程访问的RESTful API端点

3. 多模式界面

• 文本输入：代码生成的自然语言提示
• 音频输入：语音命令和语音到代码转换
• 图片上传：截图中的设计分析和代码建议
• 多种输出格式：文本反馈、音频响应和代码建议

技术栈

• 等级 6：用于创建web界面的UI框架
• 剧作家：用于屏幕截图捕获和渲染的浏览器自动化
• API双子星：谷歌用于视觉和语音转文本的多模式人工智能
• Python 3.8+：核心编程语言

安装

1. 克隆存储库：

git clone https://github.com/CodeHalwell/gradio-winter-hack.git
cd gradio-winter-hack

1. 创建虚拟环境：

python -m venv venv
source venv/bin/activate  # On Windows: venv\Scripts\activate

1. 安装依赖项：

pip install -r requirements.txt

1. 安装Playwright浏览器：

playwright install chromium

1. 配置环境变量：

cp .env.example .env
# Edit .env and add your GEMINI_API_KEY

用法

运行应用程序

启动Gradio应用程序：

python app.py

该应用程序将在 http://localhost:7860

使用代码编辑器

1. 导航到“代码编辑器”选项卡
2. 在各自的代码编辑器中编辑HTML、CSS和JavaScript
3. 点击“生成预览”查看代码的实时截图
4. 预览将更新您的最新更改

使用AI助手

1. 导航到“AI助手”选项卡
2. 选择您的输入法：

- 文本：键入要创建的内容的自然语言描述 - 音频：录制或上传语音命令 - 图像：上传代码建议的设计截图

1. 点击“生成代码”以获取基于AI的代码建议
2. 将生成的代码复制到“代码编辑器”选项卡

MCP服务器集成

该应用程序充当MCP服务器，提供：

• generate_code(prompt: str) -从文本生成HTML/CSS/JavaScript
• analyze_image(image: bytes, prompt: str) -分析设计并建议代码
• transcribe_audio(audio: bytes) -将语音转换为代码
• preview_code(html: str, css: str, js: str) -生成预览屏幕截图

示例

示例1：基于文本的代码生成

Prompt: "Create a responsive card with a gradient background, image, title, and button"
Result: Complete HTML, CSS, and JavaScript code for a responsive card component

示例2：图像分析

Upload: Screenshot of a website design
Result: HTML/CSS code suggestions to recreate the design

示例3：语音命令

Audio: "Create a navigation bar with dropdown menus"
Result: Transcribed text and generated navigation bar code

项目结构

gradio-winter-hack/
├── app.py                 # Main application file
├── requirements.txt       # Python dependencies
├── .env.example          # Example environment variables
├── .gitignore            # Git ignore patterns
└── README.md             # This file

配置

环境变量

创建一个 .env 包含以下变量的文件：

GEMINI_API_KEY=your_gemini_api_key_here

获取Gemini API密钥：

1. 访问 谷歌人工智能工作室
2. 创建新的API密钥
3. 将其添加到您的 .env 文件

发展

添加新功能

该应用程序的结构具有明确的关注点分离：

• 代码编辑器：处理代码编辑和预览生成
• AI助手：管理多模式输入和人工智能处理
• MCP服务器：提供API端点和集成功能

贡献

1. 复刻仓库
2. 创建要素分支
3. 进行更改
4. 提交拉取请求

故障排除

剧作家安装问题

# Install Playwright browsers manually
playwright install chromium

Gemini API错误

• 确保您的API密钥有效并且在中正确设置 .env
• 检查API配额和费率限制
• 验证互联网连接

端口已在使用中

# Change the port in app.py
demo.launch(server_port=7861)  # Use a different port

许可证

MIT许可证-您可以自由地将此项目用于您自己的目的。

致谢

• 专为Gradio冬季黑客MCP黑客马拉松而打造
• 由Gradio、Playwright和Google Gemini API提供支持
• 特别感谢Gradio和Google AI团队