Spaces:
Running
Running
File size: 5,949 Bytes
f6cec31 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 | <!doctype html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>AI Database Generator</title>
<link rel="stylesheet" href="style.css" />
<script src="https://cdn.tailwindcss.com"></script>
<style>
.sidebar {
width: 300px;
height: 100vh;
position: fixed;
right: 0;
top: 0;
background: #f5f5f5;
padding: 20px;
border-left: 1px solid #ddd;
overflow-y: auto;
}
.main-content {
margin-right: 320px;
padding: 20px;
}
.chat-message {
margin-bottom: 10px;
padding: 10px;
border-radius: 5px;
}
.user-message {
background: #e3f2fd;
}
.ai-message {
background: #f1f1f1;
}
.api-key-input {
margin-bottom: 20px;
}
</style>
</head>
<body>
<div class="sidebar">
<h2>AI Assistant</h2>
<div class="api-key-input">
<label for="api-key">Enter Gemini API Key:</label>
<input type="password" id="api-key" placeholder="Your Gemini API key">
<button id="save-key">Save</button>
</div>
<div id="chat-container">
<div class="chat-message ai-message">
Hello! I'm here to help you build your AI training dataset. What would you like to generate today?
</div>
</div>
<div class="chat-input">
<input type="text" id="user-input" placeholder="Ask me anything...">
<button id="send-message">Send</button>
</div>
</div>
<div class="main-content">
<h1>AI Database Generator</h1>
<div class="card">
<h2>Configuration</h2>
<div class="form-group">
<label>Dataset Type:</label>
<select id="dataset-type">
<option value="conversational">Conversational</option>
<option value="qna">Q&A</option>
<option value="code">Code Examples</option>
</select>
</div>
<div class="form-group">
<label>Prompt:</label>
<textarea id="dataset-prompt" rows="4" placeholder="Describe what you want in your dataset..."></textarea>
</div>
<button id="generate-btn">Generate Dataset</button>
</div>
<div class="card" id="output-section" style="display:none;">
<h2>Generated Output</h2>
<div id="generated-content"></div>
<div class="export-options">
<button id="export-ipynb">Export as Jupyter Notebook</button>
<button id="export-zip">Export as ZIP (with training scripts)</button>
</div>
<div class="training-instructions">
<h3>Training Instructions</h3>
<p>To train your model:</p>
<pre>pip install -r requirements.txt
python train.py</pre>
</div>
</div>
</div>
<script>
document.getElementById('generate-btn').addEventListener('click', function() {
const apiKey = document.getElementById('api-key').value;
if (!apiKey) {
alert('Please enter your Gemini API key first');
return;
}
const datasetType = document.getElementById('dataset-type').value;
const prompt = document.getElementById('dataset-prompt').value;
// Simulate generation (in a real app, this would call the Gemini API)
document.getElementById('output-section').style.display = 'block';
document.getElementById('generated-content').innerHTML = `
<p>Generating ${datasetType} dataset based on: "${prompt}"</p>
<p>Dataset generation complete! Ready for export.</p>
`;
// Add to chat
const chatContainer = document.getElementById('chat-container');
const userMessage = document.createElement('div');
userMessage.className = 'chat-message user-message';
userMessage.textContent = `I want to generate a ${datasetType} dataset about: ${prompt}`;
chatContainer.appendChild(userMessage);
const aiMessage = document.createElement('div');
aiMessage.className = 'chat-message ai-message';
aiMessage.textContent = `I've generated your ${datasetType} dataset. You can now export it for training.`;
chatContainer.appendChild(aiMessage);
});
document.getElementById('send-message').addEventListener('click', function() {
const input = document.getElementById('user-input').value;
if (!input) return;
const chatContainer = document.getElementById('chat-container');
const userMessage = document.createElement('div');
userMessage.className = 'chat-message user-message';
userMessage.textContent = input;
chatContainer.appendChild(userMessage);
// Simulate AI response
setTimeout(() => {
const aiMessage = document.createElement('div');
aiMessage.className = 'chat-message ai-message';
aiMessage.textContent = "I can help you refine your dataset requirements. What specific aspects would you like to focus on?";
chatContainer.appendChild(aiMessage);
chatContainer.scrollTop = chatContainer.scrollHeight;
}, 1000);
document.getElementById('user-input').value = '';
chatContainer.scrollTop = chatContainer.scrollHeight;
});
</script>
</body>
</html> |