Spaces:

nice-bill
/

cluster-protocol

Sleeping

App Files Files Community

nice-bill commited on Dec 14, 2025

Commit

fe1519f

1 Parent(s): 49e124f

fastapi dockerised

Browse files

Files changed (20) hide show

.dockerignore +24 -0
Dockerfile +37 -0
frontend/.gitignore +24 -0
frontend/README.md +16 -0
frontend/eslint.config.js +29 -0
frontend/index.html +16 -0
frontend/package-lock.json +0 -0
frontend/package.json +35 -0
frontend/postcss.config.js +6 -0
frontend/public/vite.svg +1 -0
frontend/src/App.css +42 -0
frontend/src/App.jsx +227 -0
frontend/src/assets/logo.svg +13 -0
frontend/src/assets/react.svg +1 -0
frontend/src/components/PersonaChart.jsx +61 -0
frontend/src/components/RoastCard.jsx +22 -0
frontend/src/index.css +50 -0
frontend/src/main.jsx +10 -0
frontend/tailwind.config.js +40 -0
frontend/vite.config.js +7 -0

.dockerignore ADDED Viewed

	@@ -0,0 +1,24 @@

+# Git
+.git
+.gitignore
+# Python
+__pycache__/
+*.py[cod]
+*$py.class
+.venv/
+.env
+# Data & Notebooks
+data/
+notebooks/
+*.ipynb
+cache_data/
+docs/
+# Frontend
+frontend/
+node_modules/
+# Local artifacts
+*.csv

Dockerfile ADDED Viewed

	@@ -0,0 +1,37 @@

+FROM python:3.12-slim-bookworm
+# Install uv
+COPY --from=ghcr.io/astral-sh/uv:latest /uv /bin/uv
+# Set environment variables
+# Compile bytecode prevents python from writing .pyc files to disk
+ENV PYTHONDONTWRITEBYTECODE=1
+ENV PYTHONUNBUFFERED=1
+WORKDIR /app
+# Copy dependency files first for better caching
+COPY pyproject.toml uv.lock ./
+# Install dependencies
+# --frozen: Sync with exact versions from uv.lock
+# --no-dev: Do not install development dependencies
+RUN uv sync --frozen --no-dev
+# Add the virtual environment to the PATH
+# This ensures that 'uvicorn' and 'python' use the installed dependencies
+ENV PATH="/app/.venv/bin:$PATH"
+# Copy the application code
+COPY src/ src/
+COPY app.py .
+COPY kmeans_model.pkl .
+COPY wallet_power_transformer.pkl .
+# Create cache directory
+RUN mkdir -p cache_data
+EXPOSE 8000
+# Use the venv's uvicorn directly (thanks to PATH)
+CMD ["uvicorn", "app:app", "--host", "0.0.0.0", "--port", "8000"]

frontend/.gitignore ADDED Viewed

	@@ -0,0 +1,24 @@

+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+node_modules
+dist
+dist-ssr
+*.local
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

frontend/README.md ADDED Viewed

	@@ -0,0 +1,16 @@

+# React + Vite
+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+Currently, two official plugins are available:
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) (or [oxc](https://oxc.rs) when used in [rolldown-vite](https://vite.dev/guide/rolldown)) for Fast Refresh
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+## React Compiler
+The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see [this documentation](https://react.dev/learn/react-compiler/installation).
+## Expanding the ESLint configuration
+If you are developing a production application, we recommend using TypeScript with type-aware lint rules enabled. Check out the [TS template](https://github.com/vitejs/vite/tree/main/packages/create-vite/template-react-ts) for information on how to integrate TypeScript and [`typescript-eslint`](https://typescript-eslint.io) in your project.

frontend/eslint.config.js ADDED Viewed

	@@ -0,0 +1,29 @@

+import js from '@eslint/js'
+import globals from 'globals'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+import { defineConfig, globalIgnores } from 'eslint/config'
+export default defineConfig([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{js,jsx}'],
+    extends: [
+      js.configs.recommended,
+      reactHooks.configs.flat.recommended,
+      reactRefresh.configs.vite,
+    ],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+      parserOptions: {
+        ecmaVersion: 'latest',
+        ecmaFeatures: { jsx: true },
+        sourceType: 'module',
+      },
+    },
+    rules: {
+      'no-unused-vars': ['error', { varsIgnorePattern: '^[A-Z_]' }],
+    },
+  },
+])

frontend/index.html ADDED Viewed

	@@ -0,0 +1,16 @@

+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Space+Mono:ital,wght@0,400;0,700;1,400&display=swap" rel="stylesheet">
+    <title>Cluster // Protocol</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>

frontend/package-lock.json ADDED Viewed

The diff for this file is too large to render. See raw diff

frontend/package.json ADDED Viewed

	@@ -0,0 +1,35 @@

+{
+  "name": "frontend",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "lint": "eslint .",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "axios": "^1.13.2",
+    "framer-motion": "^12.23.26",
+    "lucide-react": "^0.561.0",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "recharts": "^3.5.1"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.39.1",
+    "@tailwindcss/postcss": "^4.1.18",
+    "@types/react": "^19.2.5",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^5.1.1",
+    "autoprefixer": "^10.4.22",
+    "eslint": "^9.39.1",
+    "eslint-plugin-react-hooks": "^7.0.1",
+    "eslint-plugin-react-refresh": "^0.4.24",
+    "globals": "^16.5.0",
+    "postcss": "^8.5.6",
+    "tailwindcss": "^4.1.18",
+    "vite": "^7.2.4"
+  }
+}

frontend/postcss.config.js ADDED Viewed

	@@ -0,0 +1,6 @@

+export default {
+  plugins: {
+    '@tailwindcss/postcss': {},
+    autoprefixer: {},
+  },
+}

frontend/public/vite.svg ADDED Viewed

frontend/src/App.css ADDED Viewed

	@@ -0,0 +1,42 @@

+#root {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 2rem;
+  text-align: center;
+}
+.logo {
+  height: 6em;
+  padding: 1.5em;
+  will-change: filter;
+  transition: filter 300ms;
+}
+.logo:hover {
+  filter: drop-shadow(0 0 2em #646cffaa);
+}
+.logo.react:hover {
+  filter: drop-shadow(0 0 2em #61dafbaa);
+}
+@keyframes logo-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+@media (prefers-reduced-motion: no-preference) {
+  a:nth-of-type(2) .logo {
+    animation: logo-spin infinite 20s linear;
+  }
+}
+.card {
+  padding: 2em;
+}
+.read-the-docs {
+  color: #888;
+}

frontend/src/App.jsx ADDED Viewed

	@@ -0,0 +1,227 @@

+import React, { useState } from 'react';
+import axios from 'axios';
+import { Search, Share2, Activity, Database, Zap, Wallet, ChevronRight, Terminal, Layers, Hash } from 'lucide-react';
+import { motion, AnimatePresence } from 'framer-motion';
+import PersonaChart from './components/PersonaChart';
+import RoastCard from './components/RoastCard';
+import Logo from './assets/logo.svg';
+const API_BASE = import.meta.env.VITE_API_URL || "http://localhost:8000";
+function App() {
+  const [wallet, setWallet] = useState("");
+  const [status, setStatus] = useState("idle");
+  const [data, setData] = useState(null);
+  const [errorMsg, setErrorMsg] = useState("");
+  const analyzeWallet = async () => {
+    if (!wallet.startsWith("0x")) {
+      setErrorMsg("INVALID_ADDRESS: Must start with 0x");
+      return;
+    }
+    setStatus("loading");
+    setErrorMsg("");
+    setData(null);
+    try {
+      const startRes = await axios.post(`${API_BASE}/analyze/start/${wallet}`);
+      pollStatus(startRes.data.job_id);
+    } catch (err) {
+      console.error(err);
+      setErrorMsg("CONNECTION_ERR: API Unreachable");
+      setStatus("error");
+    }
+  };
+  const handleExport = () => {
+    if (!data) return;
+    const jsonString = `data:text/json;chatset=utf-8,${encodeURIComponent(
+      JSON.stringify(data, null, 2)
+    )}`;
+    const link = document.createElement("a");
+    link.href = jsonString;
+    link.download = `analysis_${data.wallet_address || "wallet"}.json`;
+    link.click();
+  };
+  return (
+    <div className="h-screen flex flex-col overflow-hidden bg-bg-main text-sm">
+      {/* 1. Compact Top Navigation Bar */}
+      <header className="h-14 border-b border-border bg-bg-panel flex items-center px-4 justify-between shrink-0">
+        <div className="flex items-center gap-3">
+          <div className="w-8 h-8 text-accent flex items-center justify-center">
+             <img src={Logo} alt="Cluster Protocol" className="w-full h-full text-accent" />
+          </div>
+          <h1 className="font-mono font-semibold tracking-tight text-text-primary">
+            CLUSTER<span className="text-text-secondary">PROTOCOL</span>
+          </h1>
+          <span className="px-2 py-0.5 rounded-full bg-border text-[10px] text-text-secondary font-mono">v2.1.0</span>
+        </div>
+        {/* Dense Search Input */}
+        <div className="flex items-center gap-2 w-full max-w-md">
+          <div className="relative flex-grow group">
+            <div className="absolute left-3 top-1/2 -translate-y-1/2 text-text-secondary">
+              <Terminal size={14} />
+            </div>
+            <input
+              type="text"
+              value={wallet}
+              onChange={(e) => setWallet(e.target.value)}
+              onKeyDown={(e) => e.key === 'Enter' && analyzeWallet()}
+              placeholder="0x..."
+              className="w-full bg-bg-main border border-border text-text-primary pl-9 pr-3 py-1.5 font-mono text-xs focus:outline-none focus:border-accent transition-colors rounded-sm"
+              disabled={status === 'loading'}
+            />
+          </div>
+          <button
+            onClick={analyzeWallet}
+            disabled={status === 'loading'}
+            className="px-4 py-1.5 bg-accent hover:bg-amber-400 text-black font-semibold text-xs uppercase tracking-wide rounded-sm transition-colors disabled:opacity-50"
+          >
+            {status === 'loading' ? "RUNNING..." : "EXECUTE"}
+          </button>
+        </div>
+      </header>
+      {/* Error Toast */}
+      {errorMsg && (
+        <div className="bg-red-900/20 border-b border-red-900/50 text-red-400 px-4 py-2 text-xs font-mono text-center">
+          ! {errorMsg}
+        </div>
+      )}
+      {/* Main Content - Flex Layout to avoid scroll */}
+      <main className="flex-grow flex items-center justify-center p-4 md:p-6 overflow-hidden relative">
+        {/* Empty State */}
+        {status === 'idle' && (
+          <div className="text-center text-text-secondary space-y-4 max-w-md">
+            <Layers className="w-12 h-12 mx-auto opacity-20" />
+            <div className="space-y-1">
+               <h2 className="text-text-primary font-medium">Ready to Process</h2>
+               <p className="text-xs">Enter a wallet address above to initiate the segmentation engine.</p>
+            </div>
+          </div>
+        )}
+        {/* Loading State */}
+        {status === 'loading' && (
+          <div className="w-64 space-y-2">
+            <div className="h-1 bg-border overflow-hidden rounded-full">
+              <div className="h-full bg-accent w-1/3 animate-[shimmer_1s_infinite_linear]"></div>
+            </div>
+            <div className="flex justify-between text-[10px] font-mono text-text-secondary uppercase">
+              <span>Ingesting Data</span>
+              <span className="animate-pulse">...</span>
+            </div>
+          </div>
+        )}
+        {/* Dashboard Grid */}
+        <AnimatePresence>
+          {status === 'success' && data && (
+            <motion.div
+              initial={{ opacity: 0, scale: 0.98 }}
+              animate={{ opacity: 1, scale: 1 }}
+              transition={{ duration: 0.2 }}
+              className="w-full max-w-6xl h-full grid grid-cols-1 md:grid-cols-12 gap-4 grid-rows-[auto_1fr] md:grid-rows-1"
+            >
+              {/* Col 1: Visuals (Radar) - 5 Cols */}
+              <div className="md:col-span-5 bg-bg-panel border border-border flex flex-col">
+                <div className="p-3 border-b border-border flex justify-between items-center">
+                  <span className="text-xs font-mono text-text-primary font-semibold uppercase tracking-wider">Behavioral Topology</span>
+                  <Activity size={12} className="text-text-secondary" />
+                </div>
+                <div className="flex-grow min-h-[250px] relative p-4">
+                  <PersonaChart scores={data.confidence_scores} />
+                </div>
+                <div className="p-3 border-t border-border bg-bg-main">
+                  <div className="flex items-center justify-between mb-2">
+                    <span className="text-xs text-text-secondary">Primary Classification</span>
+                    <span className="text-accent text-xs font-mono font-bold">{data.persona}</span>
+                  </div>
+                  <div className="w-full h-1.5 bg-border rounded-full overflow-hidden">
+                    <div
+                      className="h-full bg-accent"
+                      style={{ width: `${Math.max(...Object.values(data.confidence_scores)) * 100}%` }}
+                    />
+                  </div>
+                </div>
+              </div>
+              {/* Col 2: Metrics & Insights - 7 Cols */}
+              <div className="md:col-span-7 flex flex-col gap-4 overflow-y-auto pr-1">
+                {/* Top Row: Metrics */}
+                <div className="grid grid-cols-3 gap-4 h-24 shrink-0">
+                  <MetricCard
+                    label="TX_COUNT"
+                    value={data.stats.tx_count}
+                    icon={<Hash size={14} />}
+                  />
+                  <MetricCard
+                    label="NFT_VAL_USD"
+                    value={`$${Math.round(data.stats.total_nft_volume_usd).toLocaleString()}`}
+                    icon={<Database size={14} />}
+                  />
+                  <MetricCard
+                    label="GAS_ETH"
+                    value={data.stats.total_gas_spent.toFixed(4)}
+                    icon={<Zap size={14} />}
+                  />
+                </div>
+                {/* Bottom Row: Text Analysis */}
+                <div className="flex-grow bg-bg-panel border border-border flex flex-col">
+                  <div className="p-3 border-b border-border flex justify-between items-center bg-bg-main/50">
+                    <span className="text-xs font-mono text-text-primary font-semibold uppercase tracking-wider">Identity Narrative</span>
+                    <div className="flex gap-2">
+                      <div className="w-2 h-2 rounded-full bg-red-500/20 border border-red-500/50"></div>
+                      <div className="w-2 h-2 rounded-full bg-yellow-500/20 border border-yellow-500/50"></div>
+                      <div className="w-2 h-2 rounded-full bg-green-500/20 border border-green-500/50"></div>
+                    </div>
+                  </div>
+                  <div className="p-0 flex-grow relative overflow-hidden">
+                     <RoastCard explanation={data.explanation} />
+                  </div>
+                  <div className="p-3 border-t border-border flex justify-between items-center">
+                    <button
+                      onClick={handleExport}
+                      className="flex items-center gap-2 text-xs text-text-secondary hover:text-white transition-colors"
+                    >
+                      <Share2 size={12} />
+                      <span>EXPORT_JSON</span>
+                    </button>
+                    <span className="text-[10px] text-text-secondary font-mono">LATENCY: 42ms</span>
+                  </div>
+                </div>
+              </div>
+            </motion.div>
+          )}
+        </AnimatePresence>
+      </main>
+    </div>
+  );
+}
+function MetricCard({ label, value, icon }) {
+  return (
+    <div className="bg-bg-panel border border-border p-3 flex flex-col justify-between">
+      <div className="flex justify-between items-start text-text-secondary">
+        <span className="text-[10px] font-mono tracking-wider">{label}</span>
+        {icon}
+      </div>
+      <div className="text-lg font-semibold text-text-primary tracking-tight font-mono">
+        {value}
+      </div>
+    </div>
+  );
+}
+export default App;

frontend/src/assets/logo.svg ADDED Viewed

frontend/src/assets/react.svg ADDED Viewed

frontend/src/components/PersonaChart.jsx ADDED Viewed

	@@ -0,0 +1,61 @@

+import React from 'react';
+import {
+  Radar,
+  RadarChart,
+  PolarGrid,
+  PolarAngleAxis,
+  PolarRadiusAxis,
+  ResponsiveContainer,
+  Tooltip
+} from 'recharts';
+const PersonaChart = ({ scores }) => {
+  const data = Object.keys(scores).map(key => ({
+    subject: key.split(" / ")[0].toUpperCase(), // Truncate and Uppercase for cleanliness
+    value: scores[key] * 100,
+    fullMark: 100,
+  }));
+  const CustomTooltip = ({ active, payload }) => {
+    if (active && payload && payload.length) {
+      return (
+        <div className="bg-black border border-zinc-700 p-2 shadow-xl">
+          <div className="flex justify-between items-center gap-4 mb-1 border-b border-zinc-800 pb-1">
+             <span className="text-[10px] font-mono text-zinc-400 uppercase">{payload[0].payload.subject}</span>
+          </div>
+          <div className="flex items-baseline gap-1">
+            <span className="text-amber-500 font-bold font-mono text-sm">
+              {payload[0].value.toFixed(1)}%
+            </span>
+          </div>
+        </div>
+      );
+    }
+    return null;
+  };
+  return (
+    <ResponsiveContainer width="100%" height="100%">
+      <RadarChart cx="50%" cy="50%" outerRadius="70%" data={data}>
+        <PolarGrid stroke="#27272a" />
+        <PolarAngleAxis
+            dataKey="subject"
+            tick={{ fill: '#71717a', fontSize: 10, fontFamily: 'JetBrains Mono', fontWeight: 500 }}
+        />
+        <PolarRadiusAxis angle={30} domain={[0, 100]} tick={false} axisLine={false} />
+        <Radar
+          name="Confidence"
+          dataKey="value"
+          stroke="#f59e0b"
+          strokeWidth={2}
+          fill="#f59e0b"
+          fillOpacity={0.2}
+          isAnimationActive={true}
+        />
+        <Tooltip content={<CustomTooltip />} cursor={{ stroke: '#f59e0b', strokeWidth: 1 }} />
+      </RadarChart>
+    </ResponsiveContainer>
+  );
+};
+export default PersonaChart;

frontend/src/components/RoastCard.jsx ADDED Viewed

	@@ -0,0 +1,22 @@

+import React from 'react';
+const RoastCard = ({ explanation }) => {
+  const cleanText = explanation ? explanation.replace(/^["']|["']$/g, '') : '';
+  return (
+    <div className="h-full w-full p-4 overflow-y-auto font-mono text-xs md:text-sm leading-relaxed text-zinc-300">
+      <div className="mb-2 text-zinc-500 uppercase text-[10px] tracking-widest border-l-2 border-amber-500 pl-2">
+        Behavioral Pattern Detected
+      </div>
+      <p>
+        {cleanText || "Awaiting input stream..."}
+      </p>
+      <div className="mt-4 flex gap-1">
+        <span className="w-1 h-3 bg-amber-500 animate-pulse"></span>
+        <span className="w-1 h-3 bg-transparent border border-zinc-700"></span>
+      </div>
+    </div>
+  );
+};
+export default RoastCard;

frontend/src/index.css ADDED Viewed

	@@ -0,0 +1,50 @@

+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap');
+@import "tailwindcss";
+@theme {
+  --color-bg-main: #050505;
+  --color-bg-panel: #0a0a0a;
+  --color-border: #27272a;
+  --color-accent: #f59e0b; /* Amber-500 for a functional, industrial look */
+  --color-accent-dim: #78350f;
+  --color-text-primary: #e4e4e7;
+  --color-text-secondary: #a1a1aa;
+}
+body {
+  background-color: var(--color-bg-main);
+  color: var(--color-text-primary);
+  font-family: 'Inter', sans-serif;
+  overflow-x: hidden;
+}
+.font-mono {
+  font-family: 'JetBrains Mono', monospace;
+}
+/* Custom Scrollbar for dense data */
+::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+::-webkit-scrollbar-track {
+  background: var(--color-bg-main);
+}
+::-webkit-scrollbar-thumb {
+  background: var(--color-border);
+  border-radius: 3px;
+}
+::-webkit-scrollbar-thumb:hover {
+  background: var(--color-text-secondary);
+}
+/* Utilities */
+.panel-border {
+  border: 1px solid var(--color-border);
+}
+.dense-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
+  gap: 0.75rem;
+}

frontend/src/main.jsx ADDED Viewed

	@@ -0,0 +1,10 @@

+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import './index.css'
+import App from './App.jsx'
+createRoot(document.getElementById('root')).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+)

frontend/tailwind.config.js ADDED Viewed

	@@ -0,0 +1,40 @@

+/** @type {import('tailwindcss').Config} */
+export default {
+  content: [
+    "./index.html",
+    "./src/**/*.{js,ts,jsx,tsx}",
+  ],
+  theme: {
+    extend: {
+      fontFamily: {
+        mono: ['"Space Mono"', 'monospace'],
+        sans: ['"Space Mono"', 'monospace'], // Force mono everywhere for this look
+      },
+      colors: {
+        retro: {
+          bg: '#050505',      // Void Black
+          surface: '#111111', // Dark Gray
+          border: '#333333',  // Border Gray
+          primary: '#ffb000', // Amber-500 (Classic Terminal)
+          secondary: '#00ff41', // Matrix Green (Alternative accent)
+          muted: '#666666',
+        }
+      },
+      animation: {
+        'blink': 'blink 1s step-end infinite',
+        'scan': 'scan 8s linear infinite',
+      },
+      keyframes: {
+        blink: {
+          '0%, 100%': { opacity: '1' },
+          '50%': { opacity: '0' },
+        },
+        scan: {
+          '0%': { transform: 'translateY(-100%)' },
+          '100%': { transform: 'translateY(100%)' },
+        }
+      }
+    },
+  },
+  plugins: [],
+}

frontend/vite.config.js ADDED Viewed

	@@ -0,0 +1,7 @@

+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+// https://vite.dev/config/
+export default defineConfig({
+  plugins: [react()],
+})