Code Generator with Chat
Code Generator with Chat
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Code Generator with Chat</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-50">
<div class="container mx-auto px-4 py-12">
<div class="max-w-6xl mx-auto">
<!-- 标题 -->
<div class="text-center mb-12">
<h1 class="text-3xl font-bold text-gray-900 mb-4">Interactive Code Generator</h1>
<p class="text-gray-600">Chat with AI to generate, refine and optimize your code</p>
</div>
<div class="bg-white rounded-xl shadow-sm overflow-hidden">
<div class="grid lg:grid-cols-5 divide-x divide-gray-200">
<!-- 侧边栏 -->
<div class="lg:col-span-2 border-r border-gray-200">
<div class="p-6">
<div class="space-y-6">
<!-- 语言选择 -->
<div>
<label class="block text-sm font-medium text-gray-700 mb-2">Language & Framework</label>
<select class="w-full p-3 border border-gray-200 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500">
<option value="">Select stack...</option>
<option value="react">React.js</option>
<option value="vue">Vue.js</option>
<option value="node">Node.js</option>
<option value="python">Python</option>
</select>
</div>
<!-- 代码类型 -->
<div>
<label class="block text-sm font-medium text-gray-700 mb-2">Code Type</label>
<div class="grid grid-cols-2 gap-4">
<button class="p-4 border-2 border-indigo-600 rounded-lg text-center hover:bg-indigo-50 transition-colors">
<svg class="w-6 h-6 text-indigo-600 mx-auto mb-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4"/>
</svg>
<span class="text-sm font-medium text-indigo-600">Function</span>
</button>
<button class="p-4 border-2 border-gray-200 rounded-lg text-center hover:bg-gray-50 transition-colors">
<svg class="w-6 h-6 text-gray-600 mx-auto mb-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zM4 13a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H5a1 1 0 01-1-1v-6zM16 13a1 1 0 011-1h2a1 1 0 011 1v6a1 1 0 01-1 1h-2a1 1 0 01-1-1v-6z"/>
</svg>
<span class="text-sm font-medium text-gray-600">Component</span>
</button>
</div>
</div>
<!-- 选项 -->
<div class="space-y-3">
<label class="block text-sm font-medium text-gray-700">Options</label>
<label class="flex items-center gap-2">
<input type="checkbox" class="w-4 h-4 text-indigo-600 rounded">
<span class="text-sm text-gray-600">TypeScript</span>
</label>
<label class="flex items-center gap-2">
<input type="checkbox" class="w-4 h-4 text-indigo-600 rounded">
<span class="text-sm text-gray-600">Include Tests</span>
</label>
<label class="flex items-center gap-2">
<input type="checkbox" class="w-4 h-4 text-indigo-600 rounded">
<span class="text-sm text-gray-600">Add Documentation</span>
</label>
</div>
</div>
</div>
</div>
<!-- 聊天区域 -->
<div class="lg:col-span-3 flex flex-col h-[600px]">
<!-- 聊天记录 -->
<div class="flex-1 overflow-y-auto p-6 space-y-6">
<!-- AI消息 -->
<div class="flex gap-4">
<div class="w-8 h-8 bg-indigo-600 rounded-lg flex items-center justify-center flex-shrink-0">
<span class="text-white font-medium">AI</span>
</div>
<div class="flex-1">
<div class="bg-gray-100 rounded-lg p-4">
<p class="text-gray-700">Hello! I can help you generate code. What would you like to create?</p>
</div>
</div>
</div>
<!-- 用户消息 -->
<div class="flex gap-4 justify-end">
<div class="flex-1">
<div class="bg-indigo-600 rounded-lg p-4">
<p class="text-white">I need a React component for a user profile card.</p>
</div>
</div>
<div class="w-8 h-8 bg-gray-200 rounded-lg flex items-center justify-center flex-shrink-0">
<span class="text-gray-600 font-medium">U</span>
</div>
</div>
</div>
<!-- 输入区域 -->
<div class="border-t border-gray-200 p-4">
<div class="flex gap-4">
<input type="text"
class="flex-1 p-3 border border-gray-200 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500"
placeholder="Describe what you want to create...">
<button class="px-6 py-3 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition-colors flex items-center gap-2">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 5l7 7-7 7M5 5l7 7-7 7"/>
</svg>
Generate
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Batch Video Generator
AI Video Generator
Video Generator with Templates
Video Generator with Timeline
Copied to clipboard