Spaces:
Running
Running
File size: 13,120 Bytes
add9d59 eed9f00 add9d59 eed9f00 add9d59 eed9f00 add9d59 | 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 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 | <!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AI Web Agent IDE (Search Enabled)</title>
<style>
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; height: 100vh; display: flex; flex-direction: column; background: #1e1e2e; color: #cdd6f4; }
/* ヘッダー */
header { height: 50px; background: #181825; display: flex; align-items: center; justify-content: space-between; padding: 0 16px; border-bottom: 1px solid #313244; }
.logo { font-weight: bold; font-size: 16px; color: #89b4fa; }
.btn { background: #45475a; color: #cdd6f4; border: none; padding: 6px 12px; border-radius: 4px; cursor: pointer; font-size: 13px; }
.btn:hover { background: #585b70; }
.btn-primary { background: #89b4fa; color: #11111b; font-weight: bold; }
.btn-primary:hover { background: #b4befe; }
/* メインレイアウト */
.main-container { flex: 1; display: grid; grid-template-columns: 220px 1fr 1fr; overflow: hidden; }
/* 1. ファイルツリー */
.sidebar { background: #181825; border-right: 1px solid #313244; padding: 12px; overflow-y: auto; font-size: 13px; }
.sidebar h3 { font-size: 11px; text-transform: uppercase; color: #6c7086; margin-bottom: 8px; }
.file-item { padding: 4px 8px; border-radius: 4px; cursor: pointer; color: #a6adc8; }
.file-item:hover { background: #313244; color: #cdd6f4; }
/* 2. AIチャット */
.chat-panel { display: flex; flex-direction: column; background: #1e1e2e; border-right: 1px solid #313244; }
.messages { flex: 1; padding: 16px; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; }
.msg { padding: 10px 14px; border-radius: 8px; max-width: 85%; font-size: 14px; line-height: 1.5; white-space: pre-wrap; }
.msg.user { background: #313244; align-self: flex-end; }
.msg.ai { background: #45475a; align-self: flex-start; }
.msg.status { background: #313244; color: #f9e2af; align-self: center; font-size: 12px; border: 1px dashed #f9e2af; }
.input-area { padding: 12px; background: #181825; border-top: 1px solid #313244; display: flex; gap: 8px; }
textarea { flex: 1; background: #313244; border: 1px solid #45475a; color: #cdd6f4; padding: 8px; border-radius: 6px; resize: none; height: 50px; font-family: inherit; }
textarea:focus { outline: 1px solid #89b4fa; }
/* 3. プレビュー */
.preview-panel { background: #ffffff; display: flex; flex-direction: column; }
iframe { width: 100%; height: 100%; border: none; background: #fff; }
/* 設定モーダル */
.modal { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.7); justify-content: center; align-items: center; }
.modal.open { display: flex; }
.modal-content { background: #1e1e2e; padding: 24px; border-radius: 8px; width: 420px; border: 1px solid #313244; }
.modal-content h2 { margin-bottom: 16px; font-size: 18px; }
.form-group { margin-bottom: 14px; }
.form-group label { display: block; font-size: 12px; margin-bottom: 4px; color: #a6adc8; }
.form-group input { width: 100%; padding: 8px; background: #313244; border: 1px solid #45475a; color: #fff; border-radius: 4px; }
.form-group small { display: block; font-size: 11px; color: #6c7086; margin-top: 2px; }
</style>
</head>
<body>
<header>
<div class="logo">⚡ ChromeOS AI IDE</div>
<div>
<button class="btn" id="openDirBtn">📁 フォルダを開く</button>
<button class="btn" id="settingsBtn">⚙️ API設定</button>
</div>
</header>
<div class="main-container">
<div class="sidebar">
<h3>Files</h3>
<div id="fileList">フォルダが選択されていません</div>
</div>
<div class="chat-panel">
<div class="messages" id="messages">
<div class="msg ai">こんにちは！Webアプリの作成指示を出してください。<br>TavilyのAPIキーが登録されていると、必要に応じて最新情報を自動検索してコードを作成します！</div>
</div>
<div class="input-area">
<textarea id="promptInput" placeholder="AIへの指示を入力... (Ctrl + Enterで送信)"></textarea>
<button class="btn btn-primary" id="sendBtn">送信</button>
</div>
</div>
<div class="preview-panel">
<iframe id="previewFrame"></iframe>
</div>
</div>
<div class="modal" id="settingsModal">
<div class="modal-content">
<h2>設定</h2>
<div class="form-group">
<label>OpenRouter API Key (必須)</label>
<input type="password" id="openRouterKey" placeholder="sk-or-v1-...">
</div>
<div class="form-group">
<label>Tavily API Key (任意 / Web検索用)</label>
<input type="password" id="tavilyKey" placeholder="tvly-...">
<small>設定しておくと最新仕様のライブラリやエラーの自動検索が可能になります。</small>
</div>
<div style="display: flex; justify-content: flex-end; gap: 8px; margin-top: 20px;">
<button class="btn" id="closeModalBtn">キャンセル</button>
<button class="btn btn-primary" id="saveSettingsBtn">保存</button>
</div>
</div>
</div>
<script>
// --- 状態管理 ---
let dirHandle = null;
let openRouterKey = localStorage.getItem('OPENROUTER_API_KEY') || '';
let tavilyKey = localStorage.getItem('TAVILY_API_KEY') || '';
// --- DOM要素 ---
const openDirBtn = document.getElementById('openDirBtn');
const settingsBtn = document.getElementById('settingsBtn');
const settingsModal = document.getElementById('settingsModal');
const closeModalBtn = document.getElementById('closeModalBtn');
const saveSettingsBtn = document.getElementById('saveSettingsBtn');
const openRouterKeyInput = document.getElementById('openRouterKey');
const tavilyKeyInput = document.getElementById('tavilyKey');
const fileListEl = document.getElementById('fileList');
const sendBtn = document.getElementById('sendBtn');
const promptInput = document.getElementById('promptInput');
const messagesEl = document.getElementById('messages');
const previewFrame = document.getElementById('previewFrame');
openRouterKeyInput.value = openRouterKey;
tavilyKeyInput.value = tavilyKey;
// --- 設定モーダル ---
settingsBtn.onclick = () => settingsModal.classList.add('open');
closeModalBtn.onclick = () => settingsModal.classList.remove('open');
saveSettingsBtn.onclick = () => {
openRouterKey = openRouterKeyInput.value.trim();
tavilyKey = tavilyKeyInput.value.trim();
localStorage.setItem('OPENROUTER_API_KEY', openRouterKey);
localStorage.setItem('TAVILY_API_KEY', tavilyKey);
settingsModal.classList.remove('open');
alert('設定を保存しました！');
};
// --- ファイル操作 ---
openDirBtn.onclick = async () => {
try {
dirHandle = await window.showDirectoryPicker();
await renderFileList();
} catch (err) {
console.error('フォルダ選択キャンセル', err);
}
};
async function renderFileList() {
if (!dirHandle) return;
fileListEl.innerHTML = '';
for await (const entry of dirHandle.values()) {
if (entry.kind === 'file') {
const div = document.createElement('div');
div.className = 'file-item';
div.textContent = '📄 ' + entry.name;
fileListEl.appendChild(div);
}
}
}
async function saveAndPreview(code) {
previewFrame.srcdoc = code;
if (dirHandle) {
try {
const fileHandle = await dirHandle.getFileHandle('index.html', { create: true });
const writable = await fileHandle.createWritable();
await writable.write(code);
await writable.close();
await renderFileList();
} catch (e) {
console.error('保存エラー:', e);
}
}
}
// --- Tavily 検索機能 ---
async function searchTavily(query) {
if (!tavilyKey) return null;
try {
const res = await fetch("https://api.tavily.com/search", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({
api_key: tavilyKey,
query: query,
search_depth: "basic",
max_results: 3
})
});
const data = await res.json();
return data.results.map(r => `【タイトル】${r.title}\n【概要】${r.content}`).join("\n\n");
} catch (e) {
console.error("Tavily検索エラー:", e);
return null;
}
}
// --- メイン処理 ---
sendBtn.onclick = handleSend;
promptInput.onkeydown = (e) => {
if (e.key === 'Enter' && e.ctrlKey) handleSend();
};
async function handleSend() {
const userPrompt = promptInput.value.trim();
if (!userPrompt) return;
if (!openRouterKey) {
alert('右上の「⚙️ API設定」から OpenRouter Key を入力してください！');
settingsModal.classList.add('open');
return;
}
addMessage(userPrompt, 'user');
promptInput.value = '';
const statusMsg = addMessage('🔍 指示を分析中...', 'status');
try {
let searchResultsText = '';
// Tavilyキーがある場合、まず検索が必要かAIに判断させる
if (tavilyKey) {
const checkRes = await fetch('https://openrouter.ai/api/v1/chat/completions', {
method: 'POST',
headers: {
'Authorization': `Bearer ${openRouterKey}`,
'Content-Type': 'application/json'
},
body: JSON.stringify({
model: 'qwen/qwen-2.5-coder-32b-instruct:free',
messages: [
{
role: 'system',
content: 'ユーザーの要望を叶えるために最新のWeb検索が必要な場合、検索キーワード（1文）だけを出力してください。不要な場合は「NONE」とだけ出力してください。'
},
{ role: 'user', content: userPrompt }
]
})
});
const checkData = await checkRes.json();
const keyword = checkData.choices[0].message.content.trim();
if (keyword && !keyword.includes('NONE')) {
statusMsg.textContent = `🌐 ネット検索中: "${keyword}"`;
const data = await response.json();
// 🛠️ APIからエラーが返ってきた場合の安全チェックを追加
if (data.error) {
throw new Error(`OpenRouterエラー: ${data.error.message || 'モデルが見つかりません(404)'}`);
}
if (!data.choices || !data.choices[0]) {
throw new Error('AIからの返答データが取得できませんでした。');
}
const aiResponse = data.choices[0].message.content;
// 最終的なコード生成リクエスト
const finalResponse = await fetch('https://openrouter.ai/api/v1/chat/completions', {
method: 'POST',
headers: {
'Authorization': `Bearer ${openRouterKey}`,
'Content-Type': 'application/json'
},
body: JSON.stringify({
model: 'meta-llama/llama-3.3-70b-instruct:free',
messages: [
{
role: 'system',
content: 'あなたはUI/UX設計やさまざまなプログラム言語を理解した専門家です。ユーザーの要望に沿った完全なコードを出力してください。初心者でもわかるようにわかりやすく書いてください'
},
{
role: 'user',
content: userPrompt + searchResultsText
}
]
})
});
const finalData = await finalResponse.json();
const aiResponse = finalData.choices[0].message.content;
const codeMatch = aiResponse.match(/```html([\s\S]*?)```/) || aiResponse.match(/```([\s\S]*?)```/);
const cleanCode = codeMatch ? codeMatch[1].trim() : aiResponse;
statusMsg.textContent = '✅ 生成完了！プレビューとファイルに反映しました。';
statusMsg.className = 'msg ai';
await saveAndPreview(cleanCode);
} catch (err) {
console.error(err);
statusMsg.textContent = '❌ エラーが発生しました。APIキーや通信状態を確認してください。';
}
}
function addMessage(text, sender) {
const div = document.createElement('div');
div.className = `msg ${sender}`;
div.textContent = text;
messagesEl.appendChild(div);
messagesEl.scrollTop = messagesEl.scrollHeight;
return div;
}
</script>
</body>
</html> |