@test328932/test328933 1.0.0

package/src/runtime/llm-explain-panel.jsx

@@ -0,0 +1,813 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import { CreateMLCEngine, deleteModelAllInfoInCache } from '@mlc-ai/web-llm'
+
+const DEFAULT_MODEL_ID = 'Qwen3-1.7B-q4f16_1-MLC'
+const AVAILABLE_MODELS = [
+  'SmolLM2-135M-Instruct-q0f16-MLC',
+  'SmolLM2-360M-Instruct-q4f16_1-MLC',
+  'Qwen3-0.6B-q4f16_1-MLC',
+  'Qwen3-1.7B-q4f16_1-MLC',
+  'Qwen3-4B-q4f16_1-MLC',
+]
+const MAX_SOURCE_CHARS = 8000
+const STYLE_TAG_ID = 'test328932-llm-drawer-style'
+
+function trimSource(source) {
+  if (source.length <= MAX_SOURCE_CHARS) return source
+  const head = 5200
+  const tail = 2800
+  return `${source.slice(0, head)}\n/* ... source truncated for local inference ... */\n${source.slice(-tail)}`
+}
+
+function getErrorMessage(error) {
+  if (error instanceof Error) return error.message
+  return 'Unexpected LLM error'
+}
+
+function looksLikeWebGPUError(message) {
+  return /webgpu|adapter|gpu/i.test(message)
+}
+
+function installDrawerStyles() {
+  if (typeof document === 'undefined') return
+  if (document.getElementById(STYLE_TAG_ID)) return
+
+  const style = document.createElement('style')
+  style.id = STYLE_TAG_ID
+  style.textContent = `
+    .llm-drawer-toggle {
+      display: none;
+    }
+
+    .llm-drawer {
+      display: flex;
+      flex-direction: column;
+      border: 1px solid #243b53;
+      border-radius: 8px;
+      background: #0d2137;
+      overflow: hidden;
+      margin-top: 12px;
+    }
+
+    .llm-drawer[data-open="false"] {
+      display: none;
+    }
+
+    .llm-drawer-header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 8px;
+      padding: 8px 10px;
+      border-bottom: 1px solid #243b53;
+      background: #132f4c;
+    }
+
+    .llm-drawer-title {
+      margin: 0;
+      font-size: 0.85rem;
+      font-weight: 700;
+      color: #f0f4f8;
+    }
+
+    .llm-drawer-close {
+      width: 26px;
+      height: 26px;
+      border-radius: 6px;
+      border: 1px solid #486581;
+      background: transparent;
+      color: #90cdf4;
+      font-weight: 700;
+      cursor: pointer;
+    }
+
+    .llm-drawer-content {
+      flex: 1;
+      overflow: auto;
+      padding: 10px;
+      display: flex;
+      flex-direction: column;
+      gap: 10px;
+      font-size: 12px;
+      color: #f0f4f8;
+    }
+
+    .llm-drawer-section-title {
+      margin: 0;
+      font-size: 0.75rem;
+      font-weight: 700;
+      text-transform: uppercase;
+      letter-spacing: 0.04em;
+      color: #90cdf4;
+    }
+
+    .llm-drawer-controls {
+      display: grid;
+      grid-template-columns: 1fr;
+      gap: 8px;
+    }
+
+    .llm-drawer-select {
+      width: 100%;
+      border: 1px solid #486581;
+      border-radius: 6px;
+      background: #1a3a5c;
+      color: #f0f4f8;
+      padding: 6px;
+      font-size: 11px;
+    }
+
+    .llm-drawer-row {
+      display: flex;
+      gap: 8px;
+      align-items: center;
+    }
+
+    .llm-drawer-btn {
+      border: 1px solid #486581;
+      border-radius: 6px;
+      padding: 5px 8px;
+      background: transparent;
+      color: #90cdf4;
+      font-size: 11px;
+      cursor: pointer;
+    }
+
+    .llm-drawer-btn:disabled {
+      opacity: 0.6;
+      cursor: not-allowed;
+    }
+
+    .llm-drawer-btn-primary {
+      border-color: #2d6a4f;
+      background: #2d6a4f;
+      color: #fff;
+      font-weight: 600;
+    }
+
+    .llm-drawer-status {
+      margin: 0;
+      font-size: 11px;
+      color: #b0c4de;
+      line-height: 1.4;
+    }
+
+    .llm-drawer-muted {
+      margin: 0;
+      color: #6b8aad;
+      font-size: 11px;
+    }
+
+    .llm-drawer-model-list {
+      list-style: none;
+      margin: 0;
+      padding: 0;
+      display: flex;
+      flex-direction: column;
+      gap: 6px;
+    }
+
+    .llm-drawer-model-item {
+      display: grid;
+      grid-template-columns: 1fr auto auto;
+      gap: 4px;
+      align-items: center;
+      padding: 5px;
+      border: 1px solid #243b53;
+      border-radius: 6px;
+      background: #1a3a5c;
+    }
+
+    .llm-drawer-model-name {
+      margin: 0;
+      font-size: 10px;
+      line-height: 1.3;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      color: #e2e8f0;
+      font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+    }
+
+    .llm-drawer-progress {
+      list-style: none;
+      margin: 0;
+      padding: 0;
+      display: flex;
+      flex-direction: column;
+      gap: 6px;
+    }
+
+    .llm-drawer-progress-item {
+      display: flex;
+      justify-content: space-between;
+      gap: 6px;
+      padding: 5px 6px;
+      border: 1px solid #243b53;
+      border-radius: 6px;
+      background: #1a3a5c;
+      font-size: 10px;
+      color: #e2e8f0;
+      font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+    }
+
+    .llm-drawer-error {
+      margin: 0;
+      color: #e63946;
+      font-size: 11px;
+    }
+
+    .llm-drawer-output {
+      width: 100%;
+      min-height: 100px;
+      border: 1px solid #486581;
+      border-radius: 6px;
+      background: #1a3a5c;
+      color: #e2e8f0;
+      padding: 6px;
+      font-size: 10px;
+      line-height: 1.45;
+      resize: vertical;
+      font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+      box-sizing: border-box;
+    }
+
+    .llm-drawer-details {
+      border: 1px solid #243b53;
+      border-radius: 6px;
+      background: #132f4c;
+      padding: 6px 8px;
+    }
+
+    .llm-drawer-summary {
+      cursor: pointer;
+      font-size: 11px;
+      font-weight: 600;
+      color: #90cdf4;
+    }
+
+    .llm-drawer-source-explorer {
+      display: flex;
+      flex-direction: column;
+      gap: 8px;
+    }
+
+    .llm-drawer-tree-panel {
+      max-height: 180px;
+      overflow: auto;
+      border: 1px solid #243b53;
+      border-radius: 6px;
+      padding: 6px;
+      background: #1a3a5c;
+    }
+
+    .llm-drawer-tree-list {
+      list-style: none;
+      padding-left: 8px;
+      margin: 0;
+      display: flex;
+      flex-direction: column;
+      gap: 6px;
+    }
+
+    .llm-drawer-tree-list li {
+      display: block;
+      padding: 0;
+      border: 0;
+      background: transparent;
+    }
+
+    .llm-drawer-tree-list details > summary {
+      cursor: pointer;
+      color: #b0c4de;
+      font-weight: 600;
+      margin-bottom: 4px;
+      font-size: 11px;
+    }
+
+    .llm-drawer-tree-file-btn {
+      width: 100%;
+      text-align: left;
+      background: transparent;
+      color: #90cdf4;
+      padding: 3px 5px;
+      border-radius: 4px;
+      border: none;
+      font-size: 11px;
+      cursor: pointer;
+    }
+
+    .llm-drawer-tree-file-btn:hover {
+      background: #243b53;
+    }
+
+    .llm-drawer-tree-file-btn.active {
+      background: #243b53;
+      color: #48bb78;
+    }
+
+    @media (max-width: 760px) {
+      .llm-drawer {
+        width: 100%;
+      }
+    }
+  `
+
+  document.head.appendChild(style)
+}
+
+export default function LlmExplainPanel({ sourcePath = 'App.tsx' }) {
+  const [isOpen, setIsOpen] = useState(true)
+  const [activeModelId, setActiveModelId] = useState(DEFAULT_MODEL_ID)
+  const [llmState, setLlmState] = useState('idle')
+  const [progressItems, setProgressItems] = useState([])
+  const [explanationText, setExplanationText] = useState('')
+  const [llmError, setLlmError] = useState('')
+  const [debugMessages, setDebugMessages] = useState([])
+  const [tokenCount, setTokenCount] = useState(0)
+  const [tokensPerSec, setTokensPerSec] = useState(0)
+  const [cachedModels, setCachedModels] = useState([])
+  const [compressedSource, setCompressedSource] = useState('')
+  const [compressedCharCount, setCompressedCharCount] = useState(0)
+
+  const [tree, setTree] = useState([])
+  const [treeError, setTreeError] = useState('')
+  const [isTreeLoading, setIsTreeLoading] = useState(false)
+  const [openedFile, setOpenedFile] = useState(null)
+  const [sourceError, setSourceError] = useState('')
+  const [activePath, setActivePath] = useState('')
+
+  const engineRef = useRef(null)
+  const currentRequestIdRef = useRef(null)
+  const firstChunkAtRef = useRef(null)
+
+  useEffect(() => {
+    installDrawerStyles()
+  }, [])
+
+  useEffect(() => {
+    const loadTree = async () => {
+      setIsTreeLoading(true)
+      setTreeError('')
+      try {
+        const response = await fetch('/__source/tree')
+        if (!response.ok) throw new Error(`Tree request failed (${response.status})`)
+        const payload = await response.json()
+        if (!Array.isArray(payload)) throw new Error('Unexpected tree response')
+        setTree(payload)
+      } catch (error) {
+        setTreeError(error instanceof Error ? error.message : 'Failed to load source tree')
+      } finally {
+        setIsTreeLoading(false)
+      }
+    }
+    loadTree()
+  }, [])
+
+  const openSourceFile = useCallback(async (filePath) => {
+    setSourceError('')
+    setActivePath(filePath)
+    try {
+      const response = await fetch(`/__source/file?path=${encodeURIComponent(filePath)}`)
+      if (!response.ok) throw new Error(`File request failed (${response.status})`)
+      const payload = await response.json()
+      if (!payload || typeof payload.path !== 'string' || typeof payload.content !== 'string') {
+        throw new Error('Unexpected file response')
+      }
+      setOpenedFile(payload)
+    } catch (error) {
+      setSourceError(error instanceof Error ? error.message : 'Failed to load file')
+    }
+  }, [])
+
+  const renderSourceTree = useCallback((nodes) => {
+    return (
+      <ul className="llm-drawer-tree-list">
+        {nodes.map(node => (
+          <li key={node.path}>
+            {node.type === 'dir' ? (
+              <details open>
+                <summary>{node.name}</summary>
+                {node.children && node.children.length > 0
+                  ? renderSourceTree(node.children)
+                  : <p style={{ color: '#888', fontSize: '11px', marginLeft: 8 }}>Empty</p>}
+              </details>
+            ) : (
+              <button
+                className={`llm-drawer-tree-file-btn${activePath === node.path ? ' active' : ''}`}
+                onClick={() => openSourceFile(node.path)}
+              >
+                {node.name}
+              </button>
+            )}
+          </li>
+        ))}
+      </ul>
+    )
+  }, [activePath, openSourceFile])
+
+  const selectedSourceText = openedFile
+    ? `${openedFile.path}:\n${openedFile.content}\n------`
+    : ''
+
+  const pushDebugMessage = useCallback((message) => {
+    const timestamp = new Date().toLocaleTimeString()
+    setDebugMessages((prev) => [`[${timestamp}] ${message}`, ...prev].slice(0, 250))
+  }, [])
+
+  const refreshCacheList = useCallback(async () => {
+    if (!('caches' in self)) {
+      setCachedModels([])
+      return
+    }
+
+    try {
+      const cache = await caches.open('webllm/config')
+      const requests = await cache.keys()
+      const models = new Set()
+
+      for (const req of requests) {
+        const parts = new URL(req.url).pathname.split('/')
+        const modelPart = parts.find((part) => part.endsWith('-MLC'))
+        if (modelPart) models.add(modelPart)
+      }
+
+      setCachedModels(Array.from(models))
+    } catch {
+      setCachedModels([])
+    }
+  }, [])
+
+  const fetchCompressedSource = useCallback(async () => {
+    try {
+      const res = await fetch('/__source/compressed')
+      if (!res.ok) return
+      const data = await res.json()
+      setCompressedSource(data.content ?? '')
+      setCompressedCharCount(data.charCount ?? 0)
+    } catch {
+      // Ignore network or parse errors in dev panel.
+    }
+  }, [])
+
+  useEffect(() => {
+    fetchCompressedSource()
+    refreshCacheList()
+
+    if (!import.meta.hot) return
+
+    const onSourceUpdate = () => {
+      fetchCompressedSource()
+    }
+
+    import.meta.hot.on('source-compressed:update', onSourceUpdate)
+    return () => {
+      import.meta.hot?.off?.('source-compressed:update', onSourceUpdate)
+    }
+  }, [fetchCompressedSource, refreshCacheList])
+
+  useEffect(() => {
+    return () => {
+      engineRef.current = null
+      currentRequestIdRef.current = null
+    }
+  }, [])
+
+  const ensureEngine = useCallback(async () => {
+    if (engineRef.current) return engineRef.current
+
+    if (typeof navigator === 'undefined' || !('gpu' in navigator)) {
+      throw new Error('WebGPU is required but not available in this browser.')
+    }
+
+    pushDebugMessage(`Creating WebLLM engine (${activeModelId})...`)
+    setLlmState('loading')
+
+    const engine = await CreateMLCEngine(activeModelId, {
+      initProgressCallback: (progress) => {
+        const pct = Math.round((progress?.progress ?? 0) * 100)
+        const text = progress?.text ?? 'model-files'
+        pushDebugMessage(`Progress: ${text} ${pct}%`)
+        setProgressItems([{ file: text, progress: pct }])
+      },
+    })
+
+    engineRef.current = engine
+    setProgressItems([])
+    pushDebugMessage('Engine ready.')
+
+    return engine
+  }, [activeModelId, pushDebugMessage])
+
+  const switchModel = useCallback((modelId) => {
+    engineRef.current = null
+    currentRequestIdRef.current = null
+    setActiveModelId(modelId)
+    setLlmState('idle')
+    pushDebugMessage(`Switched to model: ${modelId}`)
+  }, [pushDebugMessage])
+
+  const deleteCachedModel = useCallback(async (modelId) => {
+    engineRef.current = null
+    currentRequestIdRef.current = null
+
+    pushDebugMessage(`Deleting model: ${modelId}`)
+    try {
+      await deleteModelAllInfoInCache(modelId)
+      pushDebugMessage(`Deleted: ${modelId}`)
+    } catch (error) {
+      pushDebugMessage(`Error deleting ${modelId}: ${getErrorMessage(error)}`)
+    }
+
+    setLlmState('idle')
+    refreshCacheList()
+  }, [pushDebugMessage, refreshCacheList])
+
+  const explain = useCallback(async () => {
+    if (currentRequestIdRef.current) {
+      setLlmError('An explanation request is already running. Please wait.')
+      pushDebugMessage('Request blocked: another request is in-flight.')
+      return
+    }
+
+    const requestId = typeof crypto !== 'undefined' && crypto.randomUUID
+      ? crypto.randomUUID()
+      : `${Date.now()}-${Math.random()}`
+
+    currentRequestIdRef.current = requestId
+    firstChunkAtRef.current = null
+    setLlmError('')
+    setExplanationText('')
+    setTokenCount(0)
+    setTokensPerSec(0)
+
+    try {
+      const engine = await ensureEngine()
+      if (currentRequestIdRef.current !== requestId) return
+
+      refreshCacheList()
+      setLlmState('generating')
+
+      pushDebugMessage(`Fetching source file: ${sourcePath}`)
+      const response = await fetch(`/__source/file?path=${encodeURIComponent(sourcePath)}`)
+      if (!response.ok) {
+        throw new Error(`Source request failed (${response.status})`)
+      }
+
+      const payload = await response.json()
+      if (!payload || typeof payload.content !== 'string') {
+        throw new Error('Unexpected source response')
+      }
+
+      const sourceCode = trimSource(payload.content)
+      if (sourceCode.length !== payload.content.length) {
+        pushDebugMessage(`Source trimmed: ${payload.content.length} -> ${sourceCode.length} chars.`)
+      }
+
+      pushDebugMessage('Starting streamed generation...')
+      const chunks = await engine.chat.completions.create({
+        messages: [
+          {
+            role: 'user',
+            content:
+              `Explain this code in 5 to 10 sentences. ` +
+              `Describe what the app does, the main user interactions, and data flow.\n\n${sourceCode}`,
+          },
+        ],
+        stream: true,
+        max_tokens: 768,
+        temperature: 0,
+      })
+
+      let count = 0
+      for await (const chunk of chunks) {
+        if (currentRequestIdRef.current !== requestId) break
+
+        const delta = chunk?.choices?.[0]?.delta?.content
+        if (!delta) continue
+
+        count += 1
+        if (!firstChunkAtRef.current) {
+          firstChunkAtRef.current = performance.now()
+        }
+
+        setTokenCount(count)
+        const elapsed = (performance.now() - firstChunkAtRef.current) / 1000
+        if (elapsed > 0.1) {
+          setTokensPerSec(Math.round((count / elapsed) * 10) / 10)
+        }
+
+        setExplanationText((prev) => prev + delta)
+      }
+
+      if (currentRequestIdRef.current === requestId) {
+        pushDebugMessage(`Generation complete. Chunks: ${count}.`)
+        setLlmState('ready')
+        currentRequestIdRef.current = null
+      }
+    } catch (error) {
+      const message = getErrorMessage(error)
+      pushDebugMessage(`Generation error: ${message}`)
+      setLlmError(message)
+      setLlmState(looksLikeWebGPUError(message) ? 'unsupported' : 'error')
+      currentRequestIdRef.current = null
+    }
+  }, [ensureEngine, pushDebugMessage, refreshCacheList, sourcePath])
+
+  const isBusy = llmState === 'loading' || llmState === 'generating'
+
+  const buttonLabel = useMemo(() => {
+    if (llmState === 'loading') return 'Loading model...'
+    if (llmState === 'generating') return 'Explaining...'
+    if (llmState === 'unsupported') return 'Unsupported'
+    return `Explain ${sourcePath}`
+  }, [llmState, sourcePath])
+
+  const statusText = useMemo(() => {
+    if (llmState === 'loading') return 'Downloading model files...'
+    if (llmState === 'generating') {
+      if (tokensPerSec > 0) return `Generating... ${tokenCount} chunks (${tokensPerSec} chunks/s)`
+      return 'Generating explanation...'
+    }
+    if (llmState === 'ready') return 'Model ready.'
+    if (llmState === 'unsupported') return 'WebGPU is required for this model.'
+    if (llmState === 'error') return 'Could not generate explanation.'
+    return 'Open drawer and click Explain.'
+  }, [llmState, tokenCount, tokensPerSec])
+
+  return (
+    <>
+      <button
+        type="button"
+        className="llm-drawer-toggle"
+        onClick={() => setIsOpen((prev) => !prev)}
+        title={isOpen ? 'Hide LLM drawer' : 'Show LLM drawer'}
+      >
+        {isOpen ? '‹' : '›'}
+      </button>
+
+      <aside className="llm-drawer" data-open={isOpen ? 'true' : 'false'}>
+        <div className="llm-drawer-header">
+          <p className="llm-drawer-title">LLM + Source</p>
+          <button
+            type="button"
+            className="llm-drawer-close"
+            onClick={() => setIsOpen(false)}
+            title="Close drawer"
+          >
+            ×
+          </button>
+        </div>
+
+        <div className="llm-drawer-content">
+          <p className="llm-drawer-section-title">Explain</p>
+          <div className="llm-drawer-controls">
+            <select
+              value={activeModelId}
+              onChange={(event) => switchModel(event.target.value)}
+              disabled={isBusy}
+              className="llm-drawer-select"
+            >
+              {AVAILABLE_MODELS.map((id) => (
+                <option key={id} value={id}>{id}</option>
+              ))}
+            </select>
+
+            <div className="llm-drawer-row">
+              <button
+                type="button"
+                className="llm-drawer-btn llm-drawer-btn-primary"
+                onClick={explain}
+                disabled={isBusy || llmState === 'unsupported'}
+              >
+                {buttonLabel}
+              </button>
+              <button
+                type="button"
+                className="llm-drawer-btn"
+                onClick={refreshCacheList}
+                disabled={isBusy}
+              >
+                Refresh cache
+              </button>
+            </div>
+
+            <p className="llm-drawer-status">{statusText}</p>
+          </div>
+
+          <p className="llm-drawer-section-title">Downloaded Models</p>
+          {cachedModels.length === 0 ? (
+            <p className="llm-drawer-muted">No cached models found yet.</p>
+          ) : (
+            <ul className="llm-drawer-model-list">
+              {cachedModels.map((name) => (
+                <li key={name} className="llm-drawer-model-item">
+                  <p className="llm-drawer-model-name">
+                    {name}
+                    {name === activeModelId ? ' (active)' : ''}
+                  </p>
+                  {name !== activeModelId && (
+                    <button
+                      type="button"
+                      className="llm-drawer-btn"
+                      onClick={() => switchModel(name)}
+                      disabled={isBusy}
+                    >
+                      Use
+                    </button>
+                  )}
+                  <button
+                    type="button"
+                    className="llm-drawer-btn"
+                    onClick={() => deleteCachedModel(name)}
+                    disabled={isBusy}
+                  >
+                    Remove
+                  </button>
+                </li>
+              ))}
+            </ul>
+          )}
+
+          {progressItems.length > 0 && (
+            <ul className="llm-drawer-progress">
+              {progressItems.map((item, index) => (
+                <li key={`${item.file}-${index}`} className="llm-drawer-progress-item">
+                  <span>{item.file}</span>
+                  <span>{Math.round(item.progress)}%</span>
+                </li>
+              ))}
+            </ul>
+          )}
+
+          {llmError && <p className="llm-drawer-error">{llmError}</p>}
+
+          <textarea
+            className="llm-drawer-output"
+            readOnly
+            value={explanationText}
+            placeholder="Explanation will stream here after you click Explain."
+          />
+
+          <details className="llm-drawer-details" open>
+            <summary className="llm-drawer-summary">
+              Compressed Source ({compressedCharCount} chars)
+            </summary>
+            <textarea
+              className="llm-drawer-output"
+              readOnly
+              value={compressedSource}
+              placeholder="Compressed source will appear here when files change."
+              style={{ minHeight: 220, marginTop: 8 }}
+            />
+          </details>
+
+          <details className="llm-drawer-details" open>
+            <summary className="llm-drawer-summary">Source Explorer</summary>
+            <div className="llm-drawer-source-explorer" style={{ marginTop: 8 }}>
+              {isTreeLoading && <p className="llm-drawer-muted">Loading source tree...</p>}
+              {treeError && <p className="llm-drawer-error">{treeError}</p>}
+              {!isTreeLoading && !treeError && (
+                <>
+                  <div className="llm-drawer-tree-panel">
+                    {tree.length > 0
+                      ? renderSourceTree(tree)
+                      : <p className="llm-drawer-muted">No source files found.</p>}
+                  </div>
+                  {sourceError && <p className="llm-drawer-error">{sourceError}</p>}
+                  <textarea
+                    className="llm-drawer-output"
+                    readOnly
+                    value={selectedSourceText}
+                    placeholder="Click a file above to view its source."
+                    style={{ minHeight: 180 }}
+                  />
+                </>
+              )}
+            </div>
+          </details>
+
+          <details className="llm-drawer-details" open>
+            <summary className="llm-drawer-summary">Explain Debug Log</summary>
+            <div className="llm-drawer-row" style={{ marginTop: 8 }}>
+              <button
+                className="llm-drawer-btn"
+                onClick={() => setDebugMessages([])}
+                type="button"
+              >
+                Clear Log
+              </button>
+            </div>
+            <textarea
+              className="llm-drawer-output"
+              readOnly
+              value={debugMessages.join('\n')}
+              placeholder="Debug messages will appear here."
+              style={{ minHeight: 150, marginTop: 8 }}
+            />
+          </details>
+        </div>
+      </aside>
+    </>
+  )
+}