From 2566b70a9852a4617a85df954185e6822383ebd4 Mon Sep 17 00:00:00 2001
From: Ken Yasue <ken@yasue.us>
Date: Wed, 14 Jan 2026 10:32:12 +0100
Subject: [PATCH] save initial file

---
 index.html | 294 +++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 294 insertions(+)
 create mode 100644 index.html
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..ba20d7b
--- /dev/null
+++ b/index.html
@@ -0,0 +1,294 @@
+<!DOCTYPE html>
+<html lang="ja">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>AI Chat Assistant</title>
+    <!-- Tailwind CSS for styling -->
+    <script src="https://cdn.tailwindcss.com"></script>
+    <!-- Lucide Icons -->
+    <script src="https://unpkg.com/lucide@latest"></script>
+    <style>
+        .scroll-smooth {
+            scroll-behavior: smooth;
+        }
+
+        /* カスタムスクロールバー */
+        ::-webkit-scrollbar {
+            width: 6px;
+        }
+
+        ::-webkit-scrollbar-track {
+            background: transparent;
+        }
+
+        ::-webkit-scrollbar-thumb {
+            background: #e2e8f0;
+            border-radius: 10px;
+        }
+
+        ::-webkit-scrollbar-thumb:hover {
+            background: #cbd5e1;
+        }
+
+        .message-animation {
+            animation: fadeIn 0.2s ease-out;
+        }
+
+        @keyframes fadeIn {
+            from {
+                opacity: 0;
+                transform: translateY(8px);
+            }
+
+            to {
+                opacity: 1;
+                transform: translateY(0);
+            }
+        }
+    </style>
+</head>
+
+<body class="bg-gray-50 text-gray-900 font-sans h-screen flex flex-col overflow-hidden">
+
+    <!-- ヘッダー -->
+    <header class="flex items-center justify-between px-6 py-4 bg-white border-b shadow-sm z-10">
+        <div class="flex items-center gap-2">
+            <div class="p-2 bg-indigo-600 rounded-lg shadow-blue-200 shadow-lg">
+                <i data-lucide="bot" class="text-white w-6 h-6"></i>
+            </div>
+            <div>
+                <h1 class="text-lg font-bold tracking-tight text-gray-800 leading-none">AI Assistant</h1>
+                <span class="text-[10px] text-green-500 font-medium uppercase tracking-tighter">● Online</span>
+            </div>
+        </div>
+        <button id="clear-btn" class="p-2 text-gray-400 hover:text-red-500 hover:bg-red-50 rounded-full transition-all"
+            title="チャットをクリア">
+            <i data-lucide="trash-2" class="w-5 h-5"></i>
+        </button>
+    </header>
+
+    <!-- メッセージ表示エリア -->
+    <main id="chat-window" class="flex-1 overflow-y-auto px-4 py-8 scroll-smooth">
+        <div id="messages-container" class="max-w-3xl mx-auto space-y-6">
+            <!-- メッセージがここに挿入されます -->
+        </div>
+
+        <!-- ローディング表示（初期状態は非表示） -->
+        <div id="loading-indicator" class="hidden max-w-3xl mx-auto mt-6">
+            <div class="flex gap-4">
+                <div
+                    class="flex-shrink-0 w-8 h-8 rounded-full bg-white border flex items-center justify-center shadow-sm">
+                    <i data-lucide="bot" class="text-indigo-400 w-4 h-4"></i>
+                </div>
+                <div
+                    class="bg-white border border-gray-100 px-4 py-3 rounded-2xl rounded-tl-none shadow-sm flex items-center gap-3">
+                    <div class="flex gap-1">
+                        <span
+                            class="w-1.5 h-1.5 bg-indigo-400 rounded-full animate-bounce [animation-delay:-0.3s]"></span>
+                        <span
+                            class="w-1.5 h-1.5 bg-indigo-400 rounded-full animate-bounce [animation-delay:-0.15s]"></span>
+                        <span class="w-1.5 h-1.5 bg-indigo-400 rounded-full animate-bounce"></span>
+                    </div>
+                    <span class="text-gray-400 text-xs font-medium">AI応答生成中...</span>
+                </div>
+            </div>
+        </div>
+
+        <!-- エラー表示エリア -->
+        <div id="error-container" class="hidden max-w-2xl mx-auto mt-6">
+            <!-- エラー内容がここに挿入されます -->
+        </div>
+    </main>
+
+    <!-- 入力エリア -->
+    <footer class="bg-white border-t p-4">
+        <div class="max-w-3xl mx-auto">
+            <div
+                class="relative flex items-end gap-2 bg-gray-50 border border-gray-200 rounded-2xl p-1.5 focus-within:ring-2 focus-within:ring-indigo-500 focus-within:bg-white transition-all shadow-inner">
+                <textarea id="user-input" placeholder="質問を入力してください..." rows="1"
+                    class="flex-1 bg-transparent border-none focus:ring-0 text-sm py-2 px-3 resize-none max-h-40 min-h-[40px] outline-none"></textarea>
+                <button id="send-btn" class="p-2.5 rounded-xl transition-all text-gray-300 disabled:cursor-not-allowed"
+                    disabled>
+                    <i data-lucide="send" id="send-icon" class="w-5 h-5"></i>
+                </button>
+            </div>
+            <div
+                class="flex justify-between items-center mt-3 px-1 text-[10px] text-gray-400 font-medium uppercase tracking-widest">
+                <span id="model-name">Model: loading...</span>
+                <span id="api-status">API Status: Ready</span>
+            </div>
+        </div>
+    </footer>
+
+    <script>
+        const API_URL = 'https://lmstudio.yasue.org/v1/chat/completions';
+        const API_KEY = 'pGYqv9Y1u6FKN6ER6xqqv6dXxUhoeHX4';
+        const MODEL = 'openai/gpt-oss-20b';
+
+        let messages = [
+            { role: 'assistant', content: 'こんにちは！何かお手伝いできることはありますか？' }
+        ];
+        let isLoading = false;
+
+        const chatWindow = document.getElementById('chat-window');
+        const container = document.getElementById('messages-container');
+        const userInput = document.getElementById('user-input');
+        const sendBtn = document.getElementById('send-btn');
+        const clearBtn = document.getElementById('clear-btn');
+        const loadingIndicator = document.getElementById('loading-indicator');
+        const errorContainer = document.getElementById('error-container');
+        const modelLabel = document.getElementById('model-name');
+
+        modelLabel.textContent = `Model: ${MODEL}`;
+
+        // アイコンの初期化
+        function initIcons() {
+            lucide.createIcons();
+        }
+
+        // メッセージのレンダリング
+        function renderMessages() {
+            container.innerHTML = '';
+            messages.forEach((msg) => {
+                const isUser = msg.role === 'user';
+                const messageHtml = `
+                    <div class="flex gap-4 ${isUser ? 'flex-row-reverse' : 'flex-row'} message-animation">
+                        <div class="flex-shrink-0 w-8 h-8 rounded-full flex items-center justify-center shadow-sm ${isUser ? 'bg-indigo-600' : 'bg-white border'}">
+                            <i data-lucide="${isUser ? 'user' : 'bot'}" class="${isUser ? 'text-white' : 'text-indigo-600'} w-4 h-4"></i>
+                        </div>
+                        <div class="flex flex-col max-w-[85%] ${isUser ? 'items-end' : 'items-start'}">
+                            <div class="px-4 py-2.5 rounded-2xl shadow-sm text-sm ${isUser ? 'bg-indigo-600 text-white rounded-tr-none' : 'bg-white text-gray-800 border border-gray-100 rounded-tl-none'}">
+                                <p class="whitespace-pre-wrap break-words">${msg.content}</p>
+                            </div>
+                        </div>
+                    </div>
+                `;
+                container.insertAdjacentHTML('beforeend', messageHtml);
+            });
+            initIcons();
+            scrollToBottom();
+        }
+
+        function scrollToBottom() {
+            chatWindow.scrollTop = chatWindow.scrollHeight;
+        }
+
+        function showError(message) {
+            errorContainer.innerHTML = `
+                <div class="flex flex-col gap-2 p-4 bg-red-50 border border-red-100 rounded-xl text-red-700">
+                    <div class="flex items-center gap-2 font-bold text-sm">
+                        <i data-lucide="alert-circle" class="w-4 h-4"></i>
+                        <span>エラーが発生しました</span>
+                    </div>
+                    <p class="text-xs opacity-90 leading-relaxed">${message}</p>
+                    ${message.includes('Failed to fetch') ? `
+                        <div class="mt-2 text-[10px] bg-red-100 p-2 rounded flex gap-2 items-start">
+                            <i data-lucide="info" class="w-3 h-3 mt-0.5 flex-shrink-0"></i>
+                            <span>ヒント: 外部ドメインからのAPI呼び出しがブラウザにブロックされています。サーバー側で Access-Control-Allow-Origin ヘッダーを設定するか、開発中は CORS 解除用のブラウザ拡張機能を試してください。</span>
+                        </div>
+                    ` : ''}
+                </div>
+            `;
+            errorContainer.classList.remove('hidden');
+            initIcons();
+            scrollToBottom();
+        }
+
+        async function handleSend() {
+            const content = userInput.value.trim();
+            if (!content || isLoading) return;
+
+            // ユーザーメッセージを追加
+            const userMsg = { role: 'user', content };
+            messages.push(userMsg);
+
+            userInput.value = '';
+            userInput.style.height = 'auto';
+            isLoading = true;
+            errorContainer.classList.add('hidden');
+            updateUIState();
+            renderMessages();
+
+            try {
+                const response = await fetch(API_URL, {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json',
+                        'X-Api-Key': API_KEY,
+                    },
+                    mode: 'cors',
+                    body: JSON.stringify({
+                        model: MODEL,
+                        messages: messages,
+                        temperature: 0.7,
+                        max_tokens: 4000
+                    })
+                });
+
+                if (!response.ok) {
+                    const errorData = await response.json().catch(() => ({}));
+                    throw new Error(errorData.error?.message || `APIエラー (ステータス: ${response.status})`);
+                }
+
+                const data = await response.json();
+                if (data.choices && data.choices[0]?.message) {
+                    messages.push(data.choices[0].message);
+                } else {
+                    throw new Error('レスポンスの形式が正しくありません。');
+                }
+            } catch (err) {
+                console.error(err);
+                showError(err.message === 'Failed to fetch' ? 'APIへの接続に失敗しました。CORS制限を確認してください。' : err.message);
+            } finally {
+                isLoading = false;
+                updateUIState();
+                renderMessages();
+            }
+        }
+
+        function updateUIState() {
+            const isEmpty = userInput.value.trim() === '';
+            sendBtn.disabled = isLoading || isEmpty;
+
+            if (sendBtn.disabled) {
+                sendBtn.classList.replace('text-white', 'text-gray-300');
+                sendBtn.classList.remove('bg-indigo-600', 'hover:bg-indigo-700', 'shadow-md');
+            } else {
+                sendBtn.classList.replace('text-gray-300', 'text-white');
+                sendBtn.classList.add('bg-indigo-600', 'hover:bg-indigo-700', 'shadow-md');
+            }
+
+            loadingIndicator.classList.toggle('hidden', !isLoading);
+        }
+
+        // イベントリスナー
+        userInput.addEventListener('input', () => {
+            userInput.style.height = 'auto';
+            userInput.style.height = userInput.scrollHeight + 'px';
+            updateUIState();
+        });
+
+        userInput.addEventListener('keydown', (e) => {
+            if (e.key === 'Enter' && !e.shiftKey) {
+                e.preventDefault();
+                handleSend();
+            }
+        });
+
+        sendBtn.addEventListener('click', handleSend);
+
+        clearBtn.addEventListener('click', () => {
+            messages = [{ role: 'assistant', content: 'チャットをリセットしました。何かお手伝いしましょうか？' }];
+            errorContainer.classList.add('hidden');
+            renderMessages();
+        });
+
+        // 初期表示
+        renderMessages();
+        initIcons();
+    </script>
+</body>
+
+</html>
\ No newline at end of file
