Hugging Face's logo

Spaces:
visualisable-ai
/
api
Running on CPU Upgrade

App Files Community
api
File size: 3,898 Bytes 
c6c8587
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
 
"use client";

import { useState, useEffect } from "react";
import Hero from "@/components/Hero";
import AttentionExplorer from "@/components/AttentionExplorer";
import PromptDiff from "@/components/PromptDiff";
import ConfidenceMeter from "@/components/ConfidenceMeter";
import TokenFlowVisualizer from "@/components/TokenFlowVisualizer";
import CodeGenerationTracker from "@/components/CodeGenerationTracker";
import ModelInspector from "@/components/ModelInspector";
import Navigation from "@/components/Navigation";
// import WebSocketTest from "@/components/WebSocketTest"; // Removed - test component
import ClientOnly from "@/components/ClientOnly";

export default function Home() {
  const [activeView, setActiveView] = useState<"explorer" | "diff" | "confidence" | "flow" | "generation" | "inspector">("explorer");

  // Dispatch event when view changes
  useEffect(() => {
    window.dispatchEvent(new CustomEvent('viewChanged', { detail: { view: activeView } }));
  }, [activeView]);

  return (
    <div className="min-h-screen">
      <Navigation />
      <Hero />
      
      <main className="container mx-auto px-4 py-8">
        <div className="flex justify-center gap-4 mb-8">
          <button
            onClick={() => setActiveView("explorer")}
            className={`px-6 py-3 rounded-lg font-medium transition-all ${
              activeView === "explorer"
                ? "bg-blue-600 text-white"
                : "bg-gray-800 text-gray-300 hover:bg-gray-700"
            }`}
          >
            Attention Explorer
          </button>
          <button
            onClick={() => setActiveView("diff")}
            className={`px-6 py-3 rounded-lg font-medium transition-all ${
              activeView === "diff"
                ? "bg-blue-600 text-white"
                : "bg-gray-800 text-gray-300 hover:bg-gray-700"
            }`}
          >
            Prompt Diff
          </button>
          <button
            onClick={() => setActiveView("confidence")}
            className={`px-6 py-3 rounded-lg font-medium transition-all ${
              activeView === "confidence"
                ? "bg-blue-600 text-white"
                : "bg-gray-800 text-gray-300 hover:bg-gray-700"
            }`}
          >
            Confidence Meter
          </button>
          <button
            onClick={() => setActiveView("flow")}
            className={`px-6 py-3 rounded-lg font-medium transition-all ${
              activeView === "flow"
                ? "bg-blue-600 text-white"
                : "bg-gray-800 text-gray-300 hover:bg-gray-700"
            }`}
          >
            Token Flow
          </button>
          <button
            onClick={() => setActiveView("generation")}
            className={`px-6 py-3 rounded-lg font-medium transition-all ${
              activeView === "generation"
                ? "bg-blue-600 text-white"
                : "bg-gray-800 text-gray-300 hover:bg-gray-700"
            }`}
          >
            Generation
          </button>
          <button
            onClick={() => setActiveView("inspector")}
            className={`px-6 py-3 rounded-lg font-medium transition-all ${
              activeView === "inspector"
                ? "bg-blue-600 text-white"
                : "bg-gray-800 text-gray-300 hover:bg-gray-700"
            }`}
          >
            Model Inspector
          </button>
        </div>

        <div className="bg-gray-900 rounded-xl p-6 min-h-[600px]">
          {activeView === "explorer" && <AttentionExplorer />}
          {activeView === "diff" && <PromptDiff />}
          {activeView === "confidence" && <ConfidenceMeter />}
          {activeView === "flow" && <TokenFlowVisualizer />}
          {activeView === "generation" && <CodeGenerationTracker />}
          {activeView === "inspector" && <ModelInspector />}
        </div>
      </main>
    </div>
  );
}