\n {showUrlSettings\n ? (\n

URL設定

URLを入力してください（1行に1つ）:

\n setUrls(e.target.value.split(\"\\n\").map(url => url.trim()).filter(url => url))}\n rows={10}\n className=\"url-textarea\"\n />\n

\n \n \n

\n )\n : (\n <>\n

GPT-4o Web Analysis Chat

\n \n

\n {messages.map((message, index) => (\n

{message.content}

\n ))}\n {isLoading && (\n

処理中...

\n )}\n

\n setInput(e.target.value)}\n onKeyPress={handleKeyPress}\n placeholder=\"メッセージを入力...\"\n rows={2}\n disabled={isLoading}\n className=\"message-input\"\n />\n \n

\n \n )}\n

\n View Source\n

\n );\n}\n\nfunction client() {\n createRoot(document.getElementById(\"root\")).render();\n}\n\nif (typeof document !== \"undefined\") { client(); }\n\nexport default async function server(request: Request): Promise {\n const url = new URL(request.url);\n const KEY = \"glowingGoldHawk\";\n\n // API endpoints\n if (url.pathname === \"/api/config\") {\n return handleGetConfig(KEY);\n } else if (url.pathname === \"/api/save-urls\") {\n return handleSaveUrls(request, KEY);\n } else if (url.pathname === \"/api/initialize-context\") {\n return handleInitializeContext(KEY);\n } else if (url.pathname === \"/api/chat\") {\n return handleChat(request, KEY);\n }\n\n // Main HTML page\n return new Response(\n `\n \n \n \n \n \n GPT-4o Web Analysis Chat\n \n \n \n

\n \n \n \n \n `,\n {\n headers: { \"content-type\": \"text/html\" },\n },\n );\n}\n\n// Helper functions for server-side\nasync function handleGetConfig(key: string) {\n const { blob } = await import(\"https://esm.town/v/std/blob\");\n try {\n const config = await blob.getJSON(`${key}_config`) || { urls: [] };\n return Response.json(config);\n } catch (error) {\n return Response.json({ urls: [] });\n }\n}\n\nasync function handleSaveUrls(request: Request, key: string) {\n const { blob } = await import(\"https://esm.town/v/std/blob\");\n try {\n const data = await request.json();\n await blob.setJSON(`${key}_config`, { urls: data.urls });\n // Reset chat history when urls change\n await blob.setJSON(`${key}_chat_history`, { messages: [] });\n return Response.json({ success: true });\n } catch (error) {\n return Response.json({ success: false, error: error.message }, { status: 500 });\n }\n}\n\nasync function handleInitializeContext(key: string) {\n const { blob } = await import(\"https://esm.town/v/std/blob\");\n\n try {\n // Get config with URLs\n const config = await blob.getJSON(`${key}_config`) || { urls: [] };\n\n if (!config.urls || config.urls.length === 0) {\n return Response.json({ success: false, error: \"No URLs configured\" });\n }\n\n // Scrape websites and build context\n const scrapedContents = [];\n const scrapedUrls = [];\n\n for (const url of config.urls) {\n try {\n const content = await scrapeWebsite(url);\n if (content) {\n scrapedContents.push({ url, content: content.text });\n scrapedUrls.push(url);\n // Random delay between requests to be nice to servers\n await new Promise(resolve => setTimeout(resolve, Math.random() * 2000 + 1000));\n }\n } catch (error) {\n console.error(`Error scraping ${url}:`, error);\n }\n }\n\n if (scrapedContents.length === 0) {\n return Response.json({\n success: false,\n error: \"スクレイピングに失敗しました。URLを確認してください。\",\n });\n }\n\n // Build context from scraped content\n const context = `\nあなたはwebサイトのコンテンツを分析する専門家です。\n以下の複数のWebサイトから抽出されたコンテンツを分析し、質問に答えてください。\n\n${scrapedContents.map(c => `---URL: ${c.url}---\\n${c.content}\\n`).join(\"\\n\")}\n`;\n\n // Save context to blob storage\n await blob.setJSON(`${key}_context`, { context, scrapedUrls });\n\n // Reset chat history\n await blob.setJSON(`${key}_chat_history`, { messages: [] });\n\n return Response.json({ success: true, scrapedUrls });\n } catch (error) {\n console.error(\"Error initializing context:\", error);\n return Response.json({ success: false, error: error.message }, { status: 500 });\n }\n}\n\nasync function handleChat(request: Request, key: string) {\n const { blob } = await import(\"https://esm.town/v/std/blob\");\n const { OpenAI } = await import(\"https://esm.town/v/std/openai\");\n\n try {\n const data = await request.json();\n const userMessage = data.message;\n\n // Get stored context and chat history\n const contextData = await blob.getJSON(`${key}_context`) || { context: \"\" };\n const historyData = await blob.getJSON(`${key}_chat_history`) || { messages: [] };\n\n // Build messages for OpenAI\n const systemMessage = {\n role: \"system\",\n content:\n \"あなたはwebサイトのコンテンツを分析する専門家です。与えられた複数のWebサイトの内容に基づいて質問に答えてください。\",\n };\n\n const historyMessages = historyData.messages.map(msg => ({\n role: msg.role,\n content: msg.content,\n }));\n\n // First message should include the full context\n let messages;\n if (historyMessages.length === 0) {\n // First message in conversation - include full context\n messages = [\n systemMessage,\n {\n role: \"user\",\n content: `${contextData.context}\\n\\n質問: ${userMessage}`,\n },\n ];\n } else {\n // Subsequent messages - use history and append new question\n messages = [\n systemMessage,\n ...historyMessages,\n {\n role: \"user\",\n content: userMessage,\n },\n ];\n }\n\n // Initialize OpenAI\n const openai = new OpenAI();\n\n // Send to OpenAI with temperature 0.1 for more deterministic responses\n const completion = await openai.chat.completions.create({\n messages,\n model: \"gpt-4o\",\n temperature: 0.1,\n });\n\n const response = completion.choices[0].message.content;\n\n // Update chat history - store only user and assistant messages\n historyData.messages.push({ role: \"user\", content: userMessage });\n historyData.messages.push({ role: \"assistant\", content: response });\n\n // Keep history from getting too large (OpenAI has context limits)\n if (historyData.messages.length > 10) {\n // Keep only the 6 most recent messages (3 exchanges)\n historyData.messages = historyData.messages.slice(-6);\n }\n\n await blob.setJSON(`${key}_chat_history`, historyData);\n\n return Response.json({ response });\n } catch (error) {\n console.error(\"Error in chat:\", error);\n return Response.json({ response: `エラーが発生しました: ${error.message}` }, { status: 500 });\n }\n}\n\n// Web scraping implementation\nasync function scrapeWebsite(url: string, retries = 3, timeout = 10000) {\n if (!url.startsWith(\"http\")) {\n url = \"https://\" + url;\n }\n\n const headers = {\n \"User-Agent\":\n \"Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/121.0.0.0 Safari/537.36\",\n \"Accept\":\n \"text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.7\",\n \"Accept-Language\": \"ja,en-US;q=0.9,en;q=0.8\",\n };\n\n // Check if URL is in blocklist\n if (isBlocklisted(url)) {\n console.warn(`ブロックリストにあるURLをスキップ: ${url}`);\n return null;\n }\n\n // Try to scrape with retries\n for (let attempt = 0; attempt < retries; attempt++) {\n try {\n console.log(`(${attempt + 1}/${retries}) ${url} のスクレイピングを試行中...`);\n\n // Use fetch API with timeout\n const controller = new AbortController();\n const timeoutId = setTimeout(() => controller.abort(), timeout);\n\n const response = await fetch(url, {\n method: \"GET\",\n headers,\n signal: controller.signal,\n });\n\n clearTimeout(timeoutId);\n\n if (!response.ok) {\n throw new Error(`HTTP error ${response.status}: ${response.statusText}`);\n }\n\n const html = await response.text();\n\n // Simple text extraction - we're server-side so we don't have DOM\n // Extract text by removing HTML tags\n const text = html\n .replace(/)<[^<]*)*<\\/script>/gi, \"\")\n .replace(/)<[^<]*)*<\\/style>/gi, \"\")\n .replace(/)<[^<]*)*<\\/head>/gi, \"\")\n .replace(/)<[^<]*)*<\\/iframe>/gi, \"\")\n .replace(/)<[^<]*)*<\\/noscript>/gi, \"\")\n .replace(/)<[^<]*)*<\\/footer>/gi, \"\")\n .replace(/)<[^<]*)*<\\/header>/gi, \"\")\n .replace(/<[^>]+>/g, \" \")\n .replace(/\\s+/g, \" \")\n .trim();\n\n // Find all links using a simple regex\n const linkRegex = /]+href=[\"']([^\"']+)[\"'][^>]*>/g;\n const links = [];\n let match;\n\n while ((match = linkRegex.exec(html)) !== null) {\n if (match[1] && !match[1].startsWith(\"javascript:\")) {\n const normalizedLink = normalizeUrl(url, match[1]);\n if (normalizedLink) {\n links.push(normalizedLink);\n }\n }\n }\n\n return {\n text: text.substring(0, 50000), // Limit text size to prevent issues\n links,\n };\n } catch (error) {\n console.error(`${url} - Error: ${error.message} (attempt ${attempt + 1}/${retries})`);\n\n if (attempt < retries - 1) {\n // Exponential backoff with jitter\n const waitTime = Math.random() * 3000 + 3000 * Math.pow(2, attempt);\n console.log(`${url} - Waiting ${waitTime.toFixed(2)}ms before retrying...`);\n await new Promise(resolve => setTimeout(resolve, waitTime));\n } else {\n console.error(`${url} - Failed to scrape (max retries reached)`);\n return null;\n }\n }\n }\n\n return null;\n}\n\n// Helper functions for web scraping\nfunction isBlocklisted(url: string): boolean {\n try {\n const parsedUrl = new URL(url);\n const hostname = parsedUrl.hostname;\n return BLOCKLIST.some(blockedDomain => hostname.includes(blockedDomain));\n } catch {\n return false;\n }\n}\n\nfunction normalizeUrl(baseUrl: string, relativeUrl: string): string {\n try {\n // Handle relative URLs\n let absoluteUrl;\n if (relativeUrl.startsWith(\"http\")) {\n absoluteUrl = relativeUrl;\n } else if (relativeUrl.startsWith(\"//\")) {\n // Protocol-relative URL\n const baseUrlProtocol = new URL(baseUrl).protocol;\n absoluteUrl = `${baseUrlProtocol}${relativeUrl}`;\n } else if (relativeUrl.startsWith(\"/\")) {\n // Root-relative URL\n const baseUrlObj = new URL(baseUrl);\n absoluteUrl = `${baseUrlObj.protocol}//${baseUrlObj.host}${relativeUrl}`;\n } else {\n // Relative to current path\n absoluteUrl = new URL(relativeUrl, baseUrl).href;\n }\n\n // Remove query params and hash fragments\n const parsedUrl = new URL(absoluteUrl);\n parsedUrl.search = \"\";\n parsedUrl.hash = \"\";\n return parsedUrl.toString();\n } catch {\n return \"\";\n }\n}\n\n// Styles\nconst css = `\n:root {\n --bg-color: #f5f5f5;\n --chat-bg: #ffffff;\n --primary-color: #2c3e50;\n --secondary-color: #3498db;\n --user-message-bg: #e8f4fd;\n --assistant-message-bg: #f0f0f0;\n --system-message-bg: #ffe8e8;\n --border-color: #ddd;\n --text-color: #333;\n}\n\n* {\n box-sizing: border-box;\n margin: 0;\n padding: 0;\n}\n\nbody {\n font-family: \"Helvetica Neue\", Arial, sans-serif;\n line-height: 1.6;\n color: var(--text-color);\n background-color: var(--bg-color);\n height: 100vh;\n display: flex;\n flex-direction: column;\n}\n\n.app-container {\n max-width: 100%;\n width: 100%;\n height: 100vh;\n margin: 0 auto;\n display: flex;\n flex-direction: column;\n background-color: var(--chat-bg);\n box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);\n}\n\n.chat-header {\n padding: 15px 20px;\n background-color: var(--primary-color);\n color: white;\n display: flex;\n justify-content: space-between;\n align-items: center;\n border-bottom: 1px solid var(--border-color);\n}\n\n.chat-header h1 {\n font-size: 1.5rem;\n margin: 0;\n}\n\n.settings-button {\n background-color: var(--secondary-color);\n color: white;\n border: none;\n padding: 8px 15px;\n border-radius: 4px;\n cursor: pointer;\n font-size: 0.9rem;\n}\n\n.settings-button:hover {\n background-color: #2980b9;\n}\n\n.chat-container {\n flex: 1;\n overflow-y: auto;\n padding: 20px;\n display: flex;\n flex-direction: column;\n gap: 15px;\n}\n\n.message {\n padding: 12px 15px;\n border-radius: 8px;\n max-width: 85%;\n position: relative;\n}\n\n.message.user {\n align-self: flex-end;\n background-color: var(--user-message-bg);\n border-bottom-right-radius: 2px;\n}\n\n.message.assistant {\n align-self: flex-start;\n background-color: var(--assistant-message-bg);\n border-bottom-left-radius: 2px;\n}\n\n.message.system {\n align-self: center;\n background-color: var(--system-message-bg);\n font-style: italic;\n max-width: 90%;\n}\n\n.message-content {\n white-space: pre-wrap;\n word-break: break-word;\n}\n\n.loading:after {\n content: \"...\";\n animation: dots 1.5s infinite;\n display: inline-block;\n width: 20px;\n text-align: left;\n}\n\n@keyframes dots {\n 0%, 20% { content: \".\"; }\n 40% { content: \"..\"; }\n 60%, 100% { content: \"...\"; }\n}\n\n.input-container {\n display: flex;\n padding: 15px;\n border-top: 1px solid var(--border-color);\n background-color: white;\n}\n\n.message-input {\n flex: 1;\n padding: 12px;\n border: 1px solid var(--border-color);\n border-radius: 4px;\n resize: none;\n font-family: inherit;\n font-size: 1rem;\n}\n\n.send-button {\n background-color: var(--secondary-color);\n color: white;\n border: none;\n padding: 0 20px;\n margin-left: 10px;\n border-radius: 4px;\n cursor: pointer;\n font-size: 1rem;\n}\n\n.send-button:hover {\n background-color: #2980b9;\n}\n\n.send-button:disabled {\n background-color: #ccc;\n cursor: not-allowed;\n}\n\n.settings-container {\n padding: 20px;\n display: flex;\n flex-direction: column;\n gap: 15px;\n height: 100%;\n}\n\n.settings-container h2 {\n color: var(--primary-color);\n margin-bottom: 10px;\n}\n\n.url-textarea {\n width: 100%;\n padding: 10px;\n border: 1px solid var(--border-color);\n border-radius: 4px;\n font-family: inherit;\n font-size: 1rem;\n min-height: 200px;\n}\n\n.button-container {\n display: flex;\n gap: 10px;\n margin-top: 20px;\n}\n\n.save-button, .cancel-button {\n padding: 10px 20px;\n border: none;\n border-radius: 4px;\n cursor: pointer;\n font-size: 1rem;\n}\n\n.save-button {\n background-color: var(--secondary-color);\n color: white;\n}\n\n.save-button:hover {\n background-color: #2980b9;\n}\n\n.cancel-button {\n background-color: #e74c3c;\n color: white;\n}\n\n.cancel-button:hover {\n background-color: #c0392b;\n}\n\n.footer {\n padding: 10px;\n text-align: center;\n font-size: 0.8rem;\n border-top: 1px solid var(--border-color);\n}\n\n.footer a {\n color: var(--secondary-color);\n text-decoration: none;\n}\n\n.footer a:hover {\n text-decoration: underline;\n}\n\n@media (max-width: 768px) {\n .message {\n max-width: 90%;\n }\n \n .chat-header h1 {\n font-size: 1.2rem;\n }\n \n .settings-button {\n padding: 6px 10px;\n font-size: 0.8rem;\n }\n}\n`;","deleted","label",[99],"permalink","https://www.val.town/x/tsuchi_ya/sclaping_chat/code/main.tsx","extension","actionData","errors"]