Upload folder using huggingface_hub

static/app.js

@@ -2,9 +2,13 @@ const analyzeBtn = document.getElementById("analyzeBtn");
 const codeInput = document.getElementById("codeInput");
 const statusEl = document.getElementById("status");
 const indexInfoEl = document.getElementById("indexInfo");
-const graphEl = document.getElementById("graph");
 const matchesEl = document.getElementById("matches");
 const overallEl = document.getElementById("overall");
+const byClassEl = document.getElementById("byClass");
+const astQueryEl = document.getElementById("astQuery");
+const astMatchEl = document.getElementById("astMatch");
+const astQuerySummaryEl = document.getElementById("astQuerySummary");
+const astMatchSummaryEl = document.getElementById("astMatchSummary");
 
 function setStatus(message) {
   statusEl.textContent = message;
@@ -35,6 +39,90 @@ function renderIndexInfo(info) {
   indexInfoEl.textContent = pieces.join(" ");
 }
 
+function formatSummary(summary) {
+  if (!summary) return "No structural summary.";
+  const nodes = (summary.node_counts || [])
+    .map((item) => `${item.name}(${item.count})`)
+    .join(", ");
+  const calls = (summary.calls || []).map((item) => `${item.name}(${item.count})`).join(", ");
+  const parts = [];
+  if (nodes) parts.push(`Nodes: ${nodes}`);
+  if (calls) parts.push(`Calls: ${calls}`);
+  return parts.join(" · ") || "No structural summary.";
+}
+
+function setAst(queryAst, matchAst, querySummary, matchSummary) {
+  if (astQueryEl) {
+    astQueryEl.textContent = queryAst || "AST not found.";
+  }
+  if (astMatchEl) {
+    astMatchEl.textContent = matchAst || "AST not found.";
+  }
+  if (astQuerySummaryEl) {
+    astQuerySummaryEl.textContent = formatSummary(querySummary);
+  }
+  if (astMatchSummaryEl) {
+    astMatchSummaryEl.textContent = formatSummary(matchSummary);
+  }
+}
+
+async function loadAst(symbol, matchIdentifier) {
+  const code = codeInput.value.trim();
+  if (!code || !symbol) return;
+  if (astQueryEl) astQueryEl.textContent = "Loading AST...";
+  if (astMatchEl) astMatchEl.textContent = "Loading AST...";
+  const response = await fetch("/api/ast", {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify({ code, symbol, match_identifier: matchIdentifier }),
+  });
+  if (!response.ok) {
+    setAst("Failed to load AST.", "Failed to load AST.");
+    return;
+  }
+  const data = await response.json();
+  setAst(data.query_ast, data.match_ast, data.query_summary, data.match_summary);
+}
+
+function renderByClass(byClass) {
+  if (!byClassEl) return;
+  byClassEl.innerHTML = "";
+  if (!byClass || Object.keys(byClass).length === 0) {
+    byClassEl.textContent = "No class-level suggestions.";
+    return;
+  }
+  for (const qcls of Object.keys(byClass)) {
+    const card = document.createElement("div");
+    card.className = "match-card";
+    const title = document.createElement("h3");
+    title.textContent = qcls;
+    card.appendChild(title);
+    for (const row of byClass[qcls]) {
+      const line = document.createElement("div");
+      line.className = "match-row";
+      const left = document.createElement("span");
+      left.textContent = `${row.class_name} · ${Number(row.score).toFixed(4)} · ${row.coverage} defs`;
+      const right = document.createElement("span");
+      right.textContent = row.relative_path;
+      line.appendChild(left);
+      line.appendChild(right);
+      line.style.cursor = "pointer";
+      line.addEventListener("click", () => loadAst(qcls, row.top_contributors?.[0]?.match || row.identifier));
+      card.appendChild(line);
+      if (row.top_contributors && row.top_contributors.length) {
+        const expl = document.createElement("div");
+        expl.className = "helper";
+        expl.textContent = row.top_contributors
+          .map((c) => `${c.query} <- ${c.match.split(":").pop()} (${Number(c.score).toFixed(4)})`)
+          .slice(0, 3)
+          .join(" · ");
+        card.appendChild(expl);
+      }
+    }
+    byClassEl.appendChild(card);
+  }
+}
+
 function renderOverall(overall) {
   overallEl.innerHTML = "";
   if (!overall || overall.length === 0) {
@@ -45,7 +133,21 @@ function renderOverall(overall) {
   for (const entry of slice) {
     const div = document.createElement("div");
     div.className = "overall-item";
-    div.textContent = `${entry.relative_path} (${entry.score.toFixed(4)})`;
+    const title = document.createElement("div");
+    title.className = "overall-title";
+    title.textContent = entry.relative_path;
+    const meta = document.createElement("div");
+    meta.className = "overall-meta";
+    const parts = [`score ${entry.score.toFixed(4)}`];
+    if (entry.count) {
+      parts.push(`${entry.count} hits`);
+    }
+    if (entry.best_score !== undefined && entry.best_score !== null) {
+      parts.push(`best ${Number(entry.best_score).toFixed(4)}`);
+    }
+    meta.textContent = parts.join(" · ");
+    div.appendChild(title);
+    div.appendChild(meta);
     overallEl.appendChild(div);
   }
 }
@@ -61,20 +163,35 @@ function renderMatches(results) {
     const card = document.createElement("div");
     card.className = "match-card";
     const title = document.createElement("h3");
-    title.textContent = symbol;
+    const kind = results[symbol].kind || "definition";
+    title.textContent = `${symbol} (${kind})`;
     card.appendChild(title);
     const list = document.createElement("div");
     list.className = "match-list";
     const matches = results[symbol].embedding || [];
+    const defaultMatch = matches[0]?.identifier;
+    title.style.cursor = "pointer";
+    title.addEventListener("click", () => loadAst(symbol, defaultMatch));
     for (const match of matches) {
       const row = document.createElement("div");
       row.className = "match-row";
       const left = document.createElement("span");
-      left.textContent = `${match.match_name} (${match.score.toFixed(4)})`;
+      left.textContent = `${match.match_name} · ${match.score.toFixed(4)}`;
       const right = document.createElement("span");
-      right.textContent = match.relative_path;
+      const line = match.line ? `:${match.line}` : "";
+      const location = `${match.relative_path}${line}`;
+      right.textContent = location;
+      right.title = "Click to copy";
       row.appendChild(left);
       row.appendChild(right);
+      row.style.cursor = "pointer";
+      row.addEventListener("click", () => loadAst(symbol, match.identifier));
+      right.addEventListener("click", (event) => {
+        event.stopPropagation();
+        if (navigator.clipboard && window.isSecureContext) {
+          navigator.clipboard.writeText(location);
+        }
+      });
       list.appendChild(row);
     }
     card.appendChild(list);
@@ -82,99 +199,6 @@ function renderMatches(results) {
   }
 }
 
-function renderGraph(graph) {
-  graphEl.innerHTML = "";
-  const width = graphEl.clientWidth;
-  const height = graphEl.clientHeight;
-  const svg = d3
-    .select(graphEl)
-    .append("svg")
-    .attr("width", width)
-    .attr("height", height);
-
-  const nodes = graph.nodes.map((node) => ({ ...node }));
-  const links = graph.edges.map((edge) => ({ ...edge }));
-
-  const color = (type) => {
-    if (type === "class") return "#d6572b";
-    if (type === "method") return "#2b6fd6";
-    if (type === "function") return "#1b8d57";
-    return "#666";
-  };
-
-  const simulation = d3
-    .forceSimulation(nodes)
-    .force("link", d3.forceLink(links).id((d) => d.id).distance(80))
-    .force("charge", d3.forceManyBody().strength(-220))
-    .force("center", d3.forceCenter(width / 2, height / 2));
-
-  const link = svg
-    .append("g")
-    .attr("stroke", "#333")
-    .attr("stroke-opacity", 0.4)
-    .selectAll("line")
-    .data(links)
-    .join("line")
-    .attr("stroke-width", (d) => (d.type === "contains" ? 1.5 : 1));
-
-  const node = svg
-    .append("g")
-    .attr("stroke", "#fff")
-    .attr("stroke-width", 1.5)
-    .selectAll("circle")
-    .data(nodes)
-    .join("circle")
-    .attr("r", (d) => (d.type === "class" ? 9 : 6))
-    .attr("fill", (d) => color(d.type))
-    .call(drag(simulation));
-
-  const labels = svg
-    .append("g")
-    .selectAll("text")
-    .data(nodes)
-    .join("text")
-    .text((d) => d.label)
-    .attr("font-size", 11)
-    .attr("fill", "#2b1e13")
-    .attr("dx", 12)
-    .attr("dy", 3);
-
-  node.append("title").text((d) => d.id);
-
-  simulation.on("tick", () => {
-    link
-      .attr("x1", (d) => d.source.x)
-      .attr("y1", (d) => d.source.y)
-      .attr("x2", (d) => d.target.x)
-      .attr("y2", (d) => d.target.y);
-
-    node.attr("cx", (d) => d.x).attr("cy", (d) => d.y);
-
-    labels.attr("x", (d) => d.x).attr("y", (d) => d.y);
-  });
-
-  function drag(sim) {
-    function dragstarted(event, d) {
-      if (!event.active) sim.alphaTarget(0.3).restart();
-      d.fx = d.x;
-      d.fy = d.y;
-    }
-
-    function dragged(event, d) {
-      d.fx = event.x;
-      d.fy = event.y;
-    }
-
-    function dragended(event, d) {
-      if (!event.active) sim.alphaTarget(0);
-      d.fx = null;
-      d.fy = null;
-    }
-
-    return d3.drag().on("start", dragstarted).on("drag", dragged).on("end", dragended);
-  }
-}
-
 analyzeBtn.addEventListener("click", async () => {
   const code = codeInput.value.trim();
   if (!code) {
@@ -201,7 +225,13 @@ analyzeBtn.addEventListener("click", async () => {
       throw new Error(detail || "Request failed");
     }
     const data = await response.json();
-    renderGraph(data.graph);
+    setAst(
+      "Select a definition to load its AST.",
+      "Select a definition to load its top match AST.",
+      null,
+      null
+    );
+    renderByClass(data.by_class);
     renderOverall(data.overall);
     renderMatches(data.results);
     renderIndexInfo(data.index_info);

static/index.html

@@ -5,7 +5,6 @@
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>Modular Model Graph</title>
     <link rel="stylesheet" href="/static/styles.css" />
-    <script src="https://d3js.org/d3.v7.min.js"></script>
   </head>
   <body>
     <div class="page">
@@ -45,31 +44,45 @@
       <section class="grid">
         <div class="panel">
           <div class="panel-header">
-            <h2>Graph</h2>
-            <div class="legend">
-              <span class="dot class">Class</span>
-              <span class="dot method">Method</span>
-              <span class="dot function">Function</span>
-              <span class="dot call">Call edge</span>
+            <h2>AST Compare</h2>
+          </div>
+          <p class="helper">Click a definition below to compare its AST with the top match.</p>
+          <div class="ast-grid">
+            <div>
+              <p class="ast-label">Selected</p>
+              <pre id="astQuery" class="ast-view">Select a definition to load its AST.</pre>
+              <p id="astQuerySummary" class="ast-summary">No structural summary.</p>
+            </div>
+            <div>
+              <p class="ast-label">Top Match</p>
+              <pre id="astMatch" class="ast-view">Select a definition to load its top match AST.</pre>
+              <p id="astMatchSummary" class="ast-summary">No structural summary.</p>
             </div>
           </div>
-          <div id="graph" class="graph"></div>
         </div>
 
         <div class="panel">
           <div class="panel-header">
-            <h2>Closest Models</h2>
+            <h2>Suggested Components</h2>
           </div>
-          <div id="overall" class="overall"></div>
+          <p class="helper">Class-level matches aggregated from method-level similarities.</p>
+          <div id="byClass" class="matches"></div>
         </div>
       </section>
 
       <section class="panel">
         <div class="panel-header">
-          <h2>Matches by Symbol</h2>
+          <h2>Closest Files</h2>
         </div>
-        <div id="matches" class="matches"></div>
+        <p class="helper">Normalized by best match per definition.</p>
+        <div id="overall" class="overall"></div>
       </section>
+
+      <details class="panel">
+        <summary>Matches by Definition</summary>
+        <p class="helper">Each definition from your paste with its closest matches.</p>
+        <div id="matches" class="matches"></div>
+      </details>
     </div>
 
     <script src="/static/app.js"></script>

static/styles.css

@@ -67,6 +67,12 @@ h1 {
   margin-bottom: 24px;
 }
 
+.panel summary {
+  font-size: 20px;
+  font-weight: 600;
+  cursor: pointer;
+}
+
 .panel-header {
   display: flex;
   justify-content: space-between;
@@ -142,51 +148,39 @@ textarea {
   gap: 24px;
 }
 
-.graph {
-  width: 100%;
-  height: 480px;
-  border-radius: 18px;
-  background: #fff;
-  border: 1px solid #e3d6c8;
+.ast-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 16px;
+  margin-top: 12px;
 }
 
-.legend {
-  display: flex;
-  gap: 10px;
-  align-items: center;
-  flex-wrap: wrap;
+.ast-label {
+  margin: 0 0 6px;
   font-size: 12px;
   color: var(--muted);
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
 }
 
-.dot {
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-}
-
-.dot::before {
-  content: "";
-  width: 10px;
-  height: 10px;
-  border-radius: 50%;
-  background: var(--muted);
-}
-
-.dot.class::before {
-  background: var(--accent);
-}
-
-.dot.method::before {
-  background: var(--accent-2);
-}
-
-.dot.function::before {
-  background: var(--accent-3);
+.ast-view {
+  margin: 0;
+  padding: 12px;
+  border-radius: 12px;
+  border: 1px solid #e3d6c8;
+  background: #fff;
+  font-family: "Space Grotesk", monospace;
+  font-size: 12px;
+  line-height: 1.4;
+  max-height: 520px;
+  overflow: auto;
+  white-space: pre-wrap;
 }
 
-.dot.call::before {
-  background: #333;
+.ast-summary {
+  margin: 8px 0 0;
+  font-size: 12px;
+  color: var(--muted);
 }
 
 .overall {
@@ -203,6 +197,16 @@ textarea {
   border: 1px solid #eadccd;
 }
 
+.overall-title {
+  font-weight: 600;
+}
+
+.overall-meta {
+  font-size: 12px;
+  color: var(--muted);
+  margin-top: 4px;
+}
+
 .matches {
   display: grid;
   gap: 16px;
@@ -234,8 +238,19 @@ textarea {
   gap: 12px;
 }
 
+
+.helper {
+  margin: 8px 0 0;
+  font-size: 12px;
+  color: var(--muted);
+}
+
 @media (max-width: 960px) {
   .grid {
     grid-template-columns: 1fr;
   }
+
+  .ast-grid {
+    grid-template-columns: 1fr;
+  }
 }