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