Upload app.py

dvnc_ai_v2_hf/app.py

@@ -69,9 +69,13 @@ def build_metrics_md(metrics, model_used):
 
 
 def build_frontend_payload(data):
+    graph = data.get("graph") or {}
+    graph.setdefault("nodes", [])
+    graph.setdefault("edges", [])
+    graph.setdefault("active_path", [])
     return f"""
     <script>
-    window.__DVNC_GRAPH__ = {json.dumps(data.get('graph', {}))};
+    window.__DVNC_GRAPH__ = {json.dumps(graph)};
     </script>
     {CONNECTOME_SNIPPET}
     """
@@ -153,7 +157,17 @@ html,body,.gradio-container{background:linear-gradient(180deg,#fffaf7 0%,#fff 10
 }
 .querybox,.querybox>div{background:#fff!important;border:1.5px solid rgba(255,107,53,.28)!important;border-radius:20px!important;box-shadow:0 6px 22px rgba(255,107,53,.08)!important}.querybox textarea{color:#000!important;background:#fff!important}.querybox:focus-within,.querybox>div:focus-within{border-color:#ff6b35!important;box-shadow:0 0 0 4px rgba(255,107,53,.10),0 8px 28px rgba(255,107,53,.10)!important}
 .chat-panel{padding:14px;display:flex;flex-direction:column;gap:10px;min-height:240px;max-height:300px;overflow:auto}.bubble{max-width:86%;padding:14px 16px;border:1px solid var(--line);border-radius:20px}.bubble .role{font-size:.72rem;text-transform:uppercase;letter-spacing:.14em;color:var(--muted)}.bubble p{margin:6px 0 0;line-height:1.55;color:var(--text)}.bubble.user{margin-left:auto;background:var(--orange-pale);border-color:rgba(255,107,53,.22)}.bubble.ai{background:#fff}.bubble.system{background:var(--orange-pale);border-color:rgba(255,107,53,.22)}
-.brain-shell{padding:14px}.brain-head{display:flex;justify-content:space-between;gap:16px;align-items:flex-end;margin-bottom:10px}.eyebrow{margin:0 0 4px;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--orange)}.brain-head h3{margin:0;font-size:1.02rem;color:var(--text)}.brain-help{color:var(--muted);font-size:.8rem}#dvnc-three-root{height:300px;border-radius:20px;border:1px solid var(--line);overflow:hidden;background:linear-gradient(180deg,#fff7f3 0%,#fff 100%);position:relative}
+.brain-shell{padding:14px}.brain-head{display:flex;justify-content:space-between;gap:16px;align-items:flex-end;margin-bottom:10px}.eyebrow{margin:0 0 4px;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--orange)}.brain-head h3{margin:0;font-size:1.02rem;color:var(--text)}.brain-help{color:var(--muted);font-size:.8rem}#dvnc-three-root{
+  height:340px;
+  border-radius:20px;
+  border:1px solid var(--line);
+  overflow:hidden;
+  background:
+    radial-gradient(circle at 50% 45%, rgba(255,107,53,.10), rgba(255,107,53,0) 34%),
+    linear-gradient(180deg,#fff8f5 0%, #fff 100%);
+  position:relative;
+  display:block;
+}
 .working-orb{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:80px;height:80px;border-radius:50%;background:radial-gradient(circle at 30% 30%,rgba(255,143,102,.9),var(--orange));box-shadow:0 8px 32px rgba(255,107,53,.4),inset 0 -4px 12px rgba(0,0,0,.15);animation:orbPulse 2.5s ease-in-out infinite,orbFloat 4s ease-in-out infinite}
 @keyframes orbPulse{0%,100%{box-shadow:0 8px 32px rgba(255,107,53,.4),inset 0 -4px 12px rgba(0,0,0,.15)}50%{box-shadow:0 12px 48px rgba(255,107,53,.7),inset 0 -4px 12px rgba(0,0,0,.2)}}
 @keyframes orbFloat{0%,100%{transform:translate(-50%,-50%) translateY(0)}50%{transform:translate(-50%,-50%) translateY(-12px)}}
@@ -181,68 +195,156 @@ import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
 
 function initDVNC(){
   const root = document.getElementById('dvnc-three-root');
-  const graph = window.__DVNC_GRAPH__;
-  if(!root || !graph || root.dataset.ready === '1') return;
+  if(!root || root.clientWidth === 0 || root.clientHeight === 0) return;
+
+  let graph = window.__DVNC_GRAPH__ || {};
+  const hasRealGraph = Array.isArray(graph.nodes) && graph.nodes.length > 0;
+
+  if(!hasRealGraph){
+    graph = {
+      nodes: [
+        {id:"query", group:"core", x:0, y:0, z:0},
+        {id:"mechanics", group:"domain", x:-26, y:16, z:-8},
+        {id:"conductivity", group:"bridge", x:26, y:12, z:10},
+        {id:"immune", group:"mechanism", x:-18, y:-18, z:14},
+        {id:"repair", group:"outcome", x:24, y:-16, z:-12},
+        {id:"candidate", group:"candidate", x:0, y:26, z:18}
+      ],
+      edges: [
+        ["query","mechanics"],
+        ["query","conductivity"],
+        ["query","immune"],
+        ["mechanics","candidate"],
+        ["conductivity","candidate"],
+        ["immune","repair"],
+        ["candidate","repair"]
+      ],
+      active_path: ["query","conductivity","candidate","repair"]
+    };
+  }
+
+  root.innerHTML = '';
   root.dataset.ready = '1';
+
   const scene = new THREE.Scene();
-  const camera = new THREE.PerspectiveCamera(52, root.clientWidth / root.clientHeight, 0.1, 1000);
-  camera.position.set(0, 0, 120);
+  const camera = new THREE.PerspectiveCamera(54, root.clientWidth / root.clientHeight, 0.1, 1000);
+  camera.position.set(0, 0, 115);
+
   const renderer = new THREE.WebGLRenderer({ antialias:true, alpha:true });
   renderer.setSize(root.clientWidth, root.clientHeight);
   renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
-  root.innerHTML='';
+  renderer.outputColorSpace = THREE.SRGBColorSpace;
   root.appendChild(renderer.domElement);
 
   const controls = new OrbitControls(camera, renderer.domElement);
   controls.enableDamping = true;
-  controls.autoRotate = true;
-  controls.autoRotateSpeed = .45;
   controls.enablePan = false;
+  controls.autoRotate = true;
+  controls.autoRotateSpeed = 0.55;
+
+  scene.add(new THREE.AmbientLight(0xffffff, 1.15));
+
+  const key = new THREE.PointLight(0xff6b35, 4.2, 320);
+  key.position.set(38, 42, 60);
+  scene.add(key);
+
+  const fill = new THREE.PointLight(0xffb089, 2.4, 280);
+  fill.position.set(-45, -18, 42);
+  scene.add(fill);
+
+  const rim = new THREE.PointLight(0xffffff, 1.4, 260);
+  rim.position.set(0, 0, 90);
+  scene.add(rim);
 
-  const ambient = new THREE.AmbientLight(0xffffff, .7); scene.add(ambient);
-  const key = new THREE.PointLight(0xff6b35, 2.5, 260); key.position.set(30, 40, 50); scene.add(key);
-  const fill = new THREE.PointLight(0xff8f66, 2.0, 240); fill.position.set(-40, -20, 40); scene.add(fill);
-  
-  const nodeMeshes = {};
   const active = new Set(graph.active_path || []);
-  const palette = {core:0xff6b35, domain:0xff8f66, bridge:0xffa280, mechanism:0xffb399, outcome:0xffc2ad, candidate:0xff8f66};
-  
-  const nodeGeom = new THREE.SphereGeometry(1.8, 22, 22);
-  const haloGeom = new THREE.SphereGeometry(3.4, 22, 22);
+  const nodeMeshes = {};
+  const palette = {
+    core: 0xff6b35,
+    domain: 0xff955f,
+    bridge: 0xff8a4c,
+    mechanism: 0xffb38f,
+    outcome: 0xffc7b3,
+    candidate: 0xff7b47
+  };
+
+  const nodeGeom = new THREE.SphereGeometry(3.2, 28, 28);
+  const haloGeom = new THREE.SphereGeometry(5.8, 28, 28);
 
   for(const n of graph.nodes || []){
-    const mat = new THREE.MeshStandardMaterial({ color: palette[n.group] || 0x9aa8c7, emissive: active.has(n.id) ? 0xff6b35 : 0x000000, emissiveIntensity: active.has(n.id) ? 1.2 : 0.15, roughness:.3, metalness:.15 });
+    const isActive = active.has(n.id);
+    const color = palette[n.group] || 0xd38d73;
+
+    const mat = new THREE.MeshStandardMaterial({
+      color,
+      emissive: isActive ? 0xff6b35 : color,
+      emissiveIntensity: isActive ? 1.9 : 0.28,
+      roughness: 0.22,
+      metalness: 0.1
+    });
+
     const mesh = new THREE.Mesh(nodeGeom, mat);
-    mesh.position.set(n.x, n.y, n.z);
+    mesh.position.set(n.x || 0, n.y || 0, n.z || 0);
     scene.add(mesh);
     nodeMeshes[n.id] = mesh;
-    if(active.has(n.id)){
-      const halo = new THREE.Mesh(haloGeom, new THREE.MeshBasicMaterial({ color:0xff6b35, transparent:true, opacity:.08 }));      
-      halo.position.copy(mesh.position);
-      scene.add(halo);
-      mesh.userData.halo = halo;
-    }
+
+    const halo = new THREE.Mesh(
+      haloGeom,
+      new THREE.MeshBasicMaterial({
+        color: isActive ? 0xff6b35 : color,
+        transparent: true,
+        opacity: isActive ? 0.14 : 0.05
+      })
+    );
+    halo.position.copy(mesh.position);
+    scene.add(halo);
+    mesh.userData.halo = halo;
   }
 
   function edgeActive(a,b){
     const path = graph.active_path || [];
     const ia = path.indexOf(a), ib = path.indexOf(b);
-    return ia >= 0 && ib >= 0 && Math.abs(ia-ib) === 1;
+    return ia >= 0 && ib >= 0 && Math.abs(ia - ib) === 1;
   }
 
   for(const e of graph.edges || []){
     const [a,b] = e;
     if(!nodeMeshes[a] || !nodeMeshes[b]) continue;
+
     const pts = [nodeMeshes[a].position, nodeMeshes[b].position];
     const geo = new THREE.BufferGeometry().setFromPoints(pts);
-    const mat = new THREE.LineBasicMaterial({ color: edgeActive(a,b) ? 0xff6b35 : 0xcccccc, transparent:true, opacity: edgeActive(a,b) ? 1 : .45 });    const line = new THREE.Line(geo, mat);
-    line.userData.active = edgeActive(a,b);
+    const isActive = edgeActive(a,b);
+
+    const line = new THREE.Line(
+      geo,
+      new THREE.LineBasicMaterial({
+        color: isActive ? 0xff6b35 : 0xd9c4bb,
+        transparent: true,
+        opacity: isActive ? 1.0 : 0.72
+      })
+    );
+
+    line.userData.active = isActive;
     scene.add(line);
   }
 
+  const starPositions = [];
+  for(let i = 0; i < 900; i++){
+    starPositions.push((Math.random() - 0.5) * 220);
+    starPositions.push((Math.random() - 0.5) * 220);
+    starPositions.push((Math.random() - 0.5) * 220);
+  }
+
   const stars = new THREE.Points(
-    new THREE.BufferGeometry().setAttribute('position', new THREE.Float32BufferAttribute(Array.from({length:1200},()=> (Math.random()-.5)*220), 3)),
-    new THREE.PointsMaterial({ color:0x8da6d8, size:.35, transparent:true, opacity:.6 })
+    new THREE.BufferGeometry().setAttribute(
+      'position',
+      new THREE.Float32BufferAttribute(starPositions, 3)
+    ),
+    new THREE.PointsMaterial({
+      color: 0xf1b6a1,
+      size: 0.85,
+      transparent: true,
+      opacity: 0.55
+    })
   );
   scene.add(stars);
 
@@ -250,24 +352,29 @@ function initDVNC(){
   function animate(){
     requestAnimationFrame(animate);
     const t = clock.getElapsedTime();
-    Object.values(nodeMeshes).forEach((m,i)=>{
-      m.scale.setScalar(1 + Math.sin(t*1.6 + i)*0.03);
+
+    Object.values(nodeMeshes).forEach((m, i) => {
+      const pulse = 1 + Math.sin(t * 1.8 + i) * 0.06;
+      m.scale.setScalar(pulse);
       if(m.userData.halo){
-        const s = 1 + (Math.sin(t*2.2 + i)+1)*0.08;
-        m.userData.halo.scale.setScalar(s);
+        const hs = 1 + (Math.sin(t * 2.3 + i) + 1) * 0.08;
+        m.userData.halo.scale.setScalar(hs);
       }
     });
+
+    stars.rotation.y += 0.0008;
     controls.update();
-    renderer.render(scene,camera);
+    renderer.render(scene, camera);
   }
   animate();
 
-  const resize = ()=>{
+  const resize = () => {
     if(!root.clientWidth || !root.clientHeight) return;
     camera.aspect = root.clientWidth / root.clientHeight;
     camera.updateProjectionMatrix();
     renderer.setSize(root.clientWidth, root.clientHeight);
   };
+
   window.addEventListener('resize', resize, { passive:true });
 }