Spaces:

tosei0000
/

ZONEWATCH

Runtime error

App Files Files Community

tosei0000 commited on Oct 1, 2025

Commit

bcf0aa4

verified ·

1 Parent(s): 635b7ca

Upload 3 files

Browse files

Files changed (3) hide show

static/index.html +57 -0
static/script.js +241 -0
static/style.css +218 -0

static/index.html ADDED Viewed

	@@ -0,0 +1,57 @@

+<!DOCTYPE html>
+<html lang="ja">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>AIチャットボット (最終版)</title>
+    <link rel="stylesheet" href="style.css">
+    <link rel="icon" href="https://www.google.com/s2/favicons?domain=deepmind.google" type="image/x-icon">
+    <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/dompurify/dist/purify.min.js"></script>
+</head>
+<body>
+    <div class="main-container">
+        <aside id="sidebar">
+            <button id="new-chat-button">+ 新規チャット</button>
+            <nav id="session-list"></nav>
+        </aside>
+        <main id="chat-container">
+            <header id="chat-header">
+                <button id="menu-button" title="会話履歴の表示/非表示">☰</button>
+                <h2 id="chat-title">AIチャットボット</h2>
+                <button id="toggle-settings-button" title="AIの設定">⚙️</button>
+            </header>
+            <section id="chat-window"></section>
+            <div id="file-preview-container" class="hidden">
+                <span id="file-name"></span>
+                <button id="remove-file-button" title="添付ファイルを削除">&times;</button>
+            </div>
+            <form id="chat-form">
+                <label for="file-input" class="file-input-label" title="ファイルを添付">📎</label>
+                <input type="file" id="file-input" accept="image/*" hidden>
+                <input type="text" id="message-input" placeholder="メッセージを入力、または画像をペースト..." autocomplete="off">
+                <button type="submit" id="send-button" title="送信">➤</button>
+            </form>
+        </main>
+        <aside id="settings-panel" class="hidden">
+            <h3>AIの設定</h3>
+            <div class="setting-item">
+                <label for="personality-input">人格 (システムプロンプト):</label>
+                <textarea id="personality-input" rows="8" placeholder="例: あなたは猫です。「〜にゃん」を付けて話してください。"></textarea>
+                <button id="save-personality-button">人格を保存</button>
+            </div>
+        </aside>
+    </div>
+    <script src="script.js"></script>
+</body>
+</html>

static/script.js ADDED Viewed

	@@ -0,0 +1,241 @@

+/**
+ * @file Geminiチャットボットのフロントエンド用JavaScript
+ * @description UI操作、API通信、状態管理など、すべてのフロントエンドロジックを管理します。
+ * @version 4.1.0
+ */
+document.addEventListener('DOMContentLoaded', () => {
+    // --- 1. UI要素の取得 ---
+    const ui = {
+        sidebar: document.getElementById('sidebar'),
+        menuButton: document.getElementById('menu-button'),
+        chatWindow: document.getElementById('chat-window'),
+        chatForm: document.getElementById('chat-form'),
+        messageInput: document.getElementById('message-input'),
+        sendButton: document.getElementById('send-button'),
+        sessionList: document.getElementById('session-list'),
+        newChatButton: document.getElementById('new-chat-button'),
+        toggleSettingsButton: document.getElementById('toggle-settings-button'),
+        settingsPanel: document.getElementById('settings-panel'),
+        personalityInput: document.getElementById('personality-input'),
+        savePersonalityButton: document.getElementById('save-personality-button'),
+        fileInput: document.getElementById('file-input'),
+        filePreviewContainer: document.getElementById('file-preview-container'),
+        fileNameSpan: document.getElementById('file-name'),
+        removeFileButton: document.getElementById('remove-file-button'),
+        chatTitle: document.getElementById('chat-title'),
+    };
+    // --- 2. 状態管理変数 ---
+    let state = {
+        currentSessionId: localStorage.getItem('active_chat_session_id') || null,
+        attachedFile: null,
+        isLoading: false,
+    };
+    // --- 3. API通信モジュール ---
+    const api = {
+        getSessions: () => fetch('/api/sessions').then(res => res.json()),
+        getSession: (id) => fetch(`/api/session/${id}`).then(res => res.json()),
+        deleteSession: (id) => fetch(`/api/session/${id}`, { method: 'DELETE' }),
+        renameSession: (id, title) => fetch(`/api/session/${id}/rename`, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ title }) }),
+        pinSession: (id) => fetch(`/api/session/${id}/pin`, { method: 'POST' }),
+        setPersonality: (personality) => fetch('/api/set_personality', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ personality }) }),
+        postChat: (formData) => fetch('/api/chat', { method: 'POST', body: formData }).then(res => res.json()),
+    };
+    // --- 4. UI描画モジュール ---
+    const render = {
+        sessions: (sessions) => {
+            ui.sessionList.innerHTML = '';
+            sessions.forEach(session => {
+                const item = document.createElement('div');
+                item.className = 'session-item';
+                item.dataset.sessionId = session.id;
+                item.innerHTML = `
+                    <span class="session-title">${session.title}</span>
+                    <div class="session-actions">
+                        <button class="session-action-button pin-button ${session.pinned ? 'pinned' : ''}" title="ピン留め">📌</button>
+                        <button class="session-action-button rename-button" title="名前を変更">✏️</button>
+                        <button class="session-action-button delete-button" title="削除">🗑️</button>
+                    </div>`;
+                ui.sessionList.appendChild(item);
+            });
+            render.activeSessionHighlight();
+        },
+        chatHistory: (history) => {
+            ui.chatWindow.innerHTML = '';
+            history.forEach(msg => {
+                const content = {
+                    text: msg.parts.filter(p => !p.startsWith('/uploads/')).join(' '),
+                    imageUrl: msg.parts.find(p => p.startsWith('/uploads/'))
+                };
+                render.message({ sender: msg.role === 'user' ? 'user' : 'bot', ...content });
+            });
+        },
+        message: ({ sender, text, imageFile, imageUrl }) => {
+            const el = document.createElement('div');
+            el.className = `chat-message ${sender}-message`;
+            const imageSrc = imageUrl || (imageFile ? URL.createObjectURL(imageFile) : null);
+            if (imageSrc) {
+                const img = document.createElement('img');
+                img.src = imageSrc;
+                img.className = 'message-image';
+                el.prepend(img);
+            }
+            if (text) {
+                const textEl = document.createElement('div');
+                textEl.innerHTML = DOMPurify.sanitize(marked.parse(text));
+                el.appendChild(textEl);
+            }
+            ui.chatWindow.appendChild(el);
+            ui.chatWindow.scrollTop = ui.chatWindow.scrollHeight;
+            return el;
+        },
+        activeSessionHighlight: () => {
+            document.querySelectorAll('.session-item').forEach(item => {
+                item.classList.toggle('active', item.dataset.sessionId === state.currentSessionId);
+            });
+        },
+        filePreview: () => {
+            if (state.attachedFile) {
+                ui.fileNameSpan.textContent = state.attachedFile.name;
+                ui.filePreviewContainer.classList.remove('hidden');
+            } else {
+                ui.filePreviewContainer.classList.add('hidden');
+                ui.fileInput.value = '';
+            }
+        },
+    };
+    // --- 5. アプリケーションロジック ---
+    const actions = {
+        startNewChat: async () => {
+            state.currentSessionId = `session-${Date.now()}`;
+            localStorage.setItem('active_chat_session_id', state.currentSessionId);
+            ui.chatWindow.innerHTML = '';
+            ui.chatTitle.textContent = "新規チャット";
+            render.message({ sender: 'bot', text: 'こんにちは！新しい会話を始めましょう。' });
+            await actions.updateSessions();
+        },
+        loadSession: async (sessionId) => {
+            if (!sessionId) return;
+            ui.chatTitle.textContent = "読み込み中...";
+            const data = await api.getSession(sessionId);
+            if (data && data.history) {
+                ui.chatTitle.textContent = data.title || "新規チャット";
+                render.chatHistory(data.history);
+            } else { await actions.startNewChat(); }
+        },
+        updateSessions: async () => render.sessions(await api.getSessions()),
+        handleFile: (file) => {
+            if (file && file.type.startsWith('image/')) {
+                state.attachedFile = file;
+                render.filePreview();
+            } else { alert('画像ファイル（PNG, JPGなど）のみ添付できます。'); }
+        },
+        setFormEnabled: (enabled) => {
+            state.isLoading = !enabled;
+            ui.messageInput.disabled = !enabled;
+            ui.sendButton.disabled = !enabled;
+        }
+    };
+    // --- 6. イベントリスナー ---
+    ui.menuButton.addEventListener('click', () => ui.sidebar.classList.toggle('visible'));
+    ui.newChatButton.addEventListener('click', () => { actions.startNewChat(); ui.sidebar.classList.remove('visible'); });
+    ui.toggleSettingsButton.addEventListener('click', () => ui.settingsPanel.classList.toggle('hidden'));
+    ui.removeFileButton.addEventListener('click', () => { state.attachedFile = null; render.filePreview(); });
+    ui.fileInput.addEventListener('change', () => ui.fileInput.files.length > 0 && actions.handleFile(ui.fileInput.files[0]));
+    ui.savePersonalityButton.addEventListener('click', async () => {
+        await api.setPersonality(ui.personalityInput.value);
+        alert('人格を更新しました。');
+        ui.settingsPanel.classList.add('hidden');
+    });
+    ui.sessionList.addEventListener('click', async (e) => {
+        const item = e.target.closest('.session-item');
+        if (!item) return;
+        const sessionId = item.dataset.sessionId;
+        const action = e.target.closest('.session-action-button');
+        if (action) {
+            e.stopPropagation();
+            if (action.classList.contains('delete-button')) {
+                if (confirm(`「${item.querySelector('.session-title').textContent}」を削除しますか？`)) {
+                    await api.deleteSession(sessionId);
+                    if (state.currentSessionId === sessionId) {
+                        state.currentSessionId = null; localStorage.removeItem('active_chat_session_id');
+                    }
+                    await actions.updateSessions();
+                    if (!state.currentSessionId) await actions.startNewChat();
+                }
+            } else if (action.classList.contains('rename-button')) {
+                const newTitle = prompt("新しい名前:", item.querySelector('.session-title').textContent);
+                if (newTitle && newTitle.trim()) await api.renameSession(sessionId, newTitle.trim());
+                await actions.updateSessions();
+            } else if (action.classList.contains('pin-button')) {
+                await api.pinSession(sessionId); await actions.updateSessions();
+            }
+        } else {
+            state.currentSessionId = sessionId; localStorage.setItem('active_chat_session_id', state.currentSessionId);
+            await actions.loadSession(sessionId); render.activeSessionHighlight();
+            ui.sidebar.classList.remove('visible');
+        }
+    });
+    document.addEventListener('paste', e => {
+        const file = Array.from(e.clipboardData.items).find(item => item.type.startsWith('image/'))?.getAsFile();
+        if (file) { actions.handleFile(file); e.preventDefault(); }
+    });
+    ui.chatForm.addEventListener('submit', async (e) => {
+        e.preventDefault();
+        const userMessage = ui.messageInput.value.trim();
+        if ((!userMessage && !state.attachedFile) || !state.currentSessionId || state.isLoading) return;
+        actions.setFormEnabled(false);
+        render.message({ sender: 'user', text: userMessage, imageFile: state.attachedFile });
+        const formData = new FormData();
+        formData.append('session_id', state.currentSessionId);
+        formData.append('message', userMessage);
+        if (state.attachedFile) formData.append('file', state.attachedFile);
+        state.attachedFile = null; render.filePreview(); ui.messageInput.value = '';
+        const loadingMessage = render.message({ sender: 'bot', text: '考え中...' });
+        try {
+            const data = await api.postChat(formData);
+            ui.chatWindow.removeChild(loadingMessage);
+            render.message({ sender: 'bot', text: data.reply || data.error });
+            if (data.title) ui.chatTitle.textContent = data.title;
+            await actions.updateSessions();
+        } catch (error) {
+            loadingMessage.textContent = "エラー: メッセージの送信に失敗しました。";
+        } finally {
+            actions.setFormEnabled(true);
+        }
+    });
+    // --- 7. 初期化 ---
+    const initialize = async () => {
+        await actions.updateSessions();
+        const firstSession = ui.sessionList.querySelector('.session-item');
+        let sessionToLoad = state.currentSessionId;
+        if (sessionToLoad && !document.querySelector(`.session-item[data-session-id="${sessionToLoad}"]`)) {
+            sessionToLoad = null;
+        }
+        if (!sessionToLoad && firstSession) {
+            sessionToLoad = firstSession.dataset.sessionId;
+        }
+        if (sessionToLoad) {
+            state.currentSessionId = sessionToLoad;
+            localStorage.setItem('active_chat_session_id', state.currentSessionId);
+            await actions.loadSession(state.currentSessionId);
+        } else {
+            await actions.startNewChat();
+        }
+        ui.sidebar.classList.remove('visible');
+    };
+    initialize();
+});

static/style.css ADDED Viewed

	@@ -0,0 +1,218 @@

+/* =================================
+   基本スタイルとレイアウト
+   ================================= */
+body {
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Hiragino Kaku Gothic ProN', 'Meiryo', sans-serif;
+    background-color: #f0f2f5;
+    margin: 0;
+    color: #333;
+    overflow: hidden;
+}
+.main-container {
+    display: flex;
+    position: relative;
+    height: 100vh;
+    width: 100vw;
+}
+/* =================================
+   左サイドバー (会話履歴)
+   ================================= */
+#sidebar {
+    position: absolute;
+    left: 0;
+    top: 0;
+    height: 100vh;
+    width: 260px;
+    background-color: #202123;
+    color: white;
+    padding: 10px;
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    z-index: 100;
+    transform: translateX(-100%);
+    transition: transform 0.3s ease-in-out;
+    box-shadow: 2px 0 5px rgba(0,0,0,0.5);
+    box-sizing: border-box;
+}
+#sidebar.visible {
+    transform: translateX(0);
+}
+#new-chat-button {
+    width: 100%;
+    padding: 10px;
+    border: 1px solid rgba(255, 255, 255, 0.5);
+    background-color: transparent;
+    color: white;
+    border-radius: 5px;
+    cursor: pointer;
+    text-align: left;
+    font-size: 0.9em;
+    transition: background-color 0.2s;
+}
+#new-chat-button:hover {
+    background-color: #343541;
+}
+#session-list {
+    flex-grow: 1;
+    overflow-y: auto;
+    display: flex;
+    flex-direction: column;
+    gap: 5px;
+}
+.session-item {
+    display: flex;
+    align-items: center;
+    padding: 10px;
+    border-radius: 5px;
+    cursor: pointer;
+    font-size: 0.9em;
+    transition: background-color 0.2s;
+    position: relative;
+}
+.session-item:hover {
+    background-color: #343541;
+}
+.session-item.active {
+    background-color: #4A90E2;
+}
+.session-title {
+    flex-grow: 1;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    padding-right: 5px;
+}
+.session-actions {
+    display: none;
+    align-items: center;
+    gap: 5px;
+    background-color: #343541;
+    padding: 3px 5px;
+    border-radius: 5px;
+}
+.session-item:hover .session-actions {
+    display: flex;
+}
+.session-action-button {
+    background: none;
+    border: none;
+    color: #e0e0e0;
+    cursor: pointer;
+    font-size: 1.1em;
+    padding: 3px;
+}
+.session-action-button:hover {
+    color: #ffffff;
+}
+.session-action-button.pinned {
+    color: #4A90E2;
+}
+/* =================================
+   中央チャットコンテナ
+   ================================= */
+main#chat-container {
+    width: 100%;
+    flex-grow: 1;
+    display: flex;
+    flex-direction: column;
+    background-color: #ffffff;
+}
+header#chat-header {
+    display: flex;
+    align-items: center;
+    gap: 15px;
+    padding: 0 15px;
+    border-bottom: 1px solid #ddd;
+    flex-shrink: 0;
+}
+#chat-header h2 {
+    flex-grow: 1;
+    text-align: center;
+    font-size: 1.1em;
+    margin: 0;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+#menu-button, #toggle-settings-button {
+    background: none;
+    border: none;
+    font-size: 1.5em;
+    cursor: pointer;
+    padding: 10px;
+    color: #555;
+    transition: color 0.2s;
+}
+#menu-button:hover, #toggle-settings-button:hover {
+    color: #000;
+}
+section#chat-window {
+    flex-grow: 1;
+    padding: 20px;
+    overflow-y: auto;
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+}
+.chat-message { padding: 10px 15px; border-radius: 18px; max-width: 80%; line-height: 1.5; word-wrap: break-word; display: flex; flex-direction: column; gap: 8px; }
+.user-message { background-color: #4A90E2; color: white; align-self: flex-end; border-bottom-right-radius: 4px; }
+.bot-message { background-color: #e9e9eb; color: #333; align-self: flex-start; border-bottom-left-radius: 4px; }
+.user-message .message-image, .bot-message .message-image { max-width: 100%; max-height: 300px; border-radius: 10px; object-fit: contain; }
+.system-message { background-color: #fffbe5; color: #5c5224; align-self: center; font-size: 0.9em; font-style: italic; text-align: center; padding: 8px 12px; }
+.bot-message.loading::after { content: '...'; display: inline-block; animation: loading-dots 1.4s infinite; }
+@keyframes loading-dots { 0%, 20% { content: '.'; } 40% { content: '..'; } 60% { content: '...'; } }
+/* Markdown表示用のスタイル */
+.bot-message p { margin: 0 0 10px 0; }
+.bot-message ul, .bot-message ol { padding-left: 20px; margin: 0 0 10px 0; }
+.bot-message li { margin-bottom: 5px; }
+.bot-message code { background-color: #e0e0e0; padding: 2px 4px; border-radius: 4px; font-family: monospace; }
+.bot-message pre { background-color: #e0e0e0; padding: 10px; border-radius: 4px; white-space: pre-wrap; word-wrap: break-word; }
+#file-preview-container { padding: 5px 15px; background-color: #f0f2f5; display: flex; justify-content: space-between; align-items: center; font-size: 0.9em; border-top: 1px solid #ddd; }
+#file-preview-container.hidden { display: none; }
+#remove-file-button { background: none; border: none; font-size: 1.2em; cursor: pointer; color: #888; }
+form#chat-form { display: flex; align-items: center; border-top: 1px solid #ddd; padding: 10px 15px; gap: 10px; flex-shrink: 0; }
+.file-input-label { font-size: 1.5em; cursor: pointer; padding: 5px; color: #555; }
+#message-input { flex-grow: 1; border: 1px solid #ccc; border-radius: 20px; padding: 10px 15px; font-size: 1em; outline: none; transition: border-color 0.2s; }
+#message-input:focus { border-color: #4A90E2; }
+#send-button { background-color: #4A90E2; color: white; border: none; border-radius: 50%; width: 40px; height: 40px; font-size: 1.5em; cursor: pointer; transition: background-color 0.2s; flex-shrink: 0; }
+#send-button:hover { background-color: #357ABD; }
+/* =================================
+   右サイドバー (設定パネル)
+   ================================= */
+aside#settings-panel {
+    width: 300px;
+    background-color: #f9f9f9;
+    border-left: 1px solid #ddd;
+    padding: 20px;
+    transition: width 0.3s ease, padding 0.3s ease;
+    overflow: hidden;
+    box-sizing: border-box;
+}
+#settings-panel.hidden { width: 0; padding: 20px 0; border-left: none; }
+#settings-panel h3 { margin-top: 0; text-align: center; border-bottom: 1px solid #eee; padding-bottom: 15px; }
+.setting-item { display: flex; flex-direction: column; gap: 8px; }
+.setting-item label { font-weight: bold; font-size: 0.9em; color: #555; }
+.setting-item textarea { width: 100%; padding: 8px 12px; border: 1px solid #ccc; border-radius: 8px; font-size: 0.95em; box-sizing: border-box; font-family: inherit; resize: vertical; min-height: 100px; }
+.setting-item button { background-color: #5cb85c; color: white; border: none; border-radius: 8px; padding: 10px; cursor: pointer; font-weight: bold; transition: background-color 0.2s; }
+.setting-item button:hover { background-color: #4a934a; }