save initial file
This commit is contained in:
294
index.html
Normal file
294
index.html
Normal file
@ -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>
|
||||
Reference in New Issue
Block a user