You are an elite full-stack developer and quant engineer.

🚀 GOAL
Build a production-ready web app called **CryptoSignal-Sleuth** hosted as a Hugging Face Space.
This app should be a powerful, transparent, multi-model crypto signal dashboard that is clearly **more advanced and informative than tradvio.com** (AI chart screenshot analyzer that outputs buy/sell/hold with entry, SL and TP). The app does NOT make trade guarantees; it only provides analysis and ideas.

The app will:
- Let a user **upload a trading screenshot** OR **select a crypto pair and timeframe** for live market analysis.
- Run multiple **Hugging Face models** (vision, time-series, sentiment, LLM reasoning) to generate trades ideas.
- Output structured **signals**: direction, entry zone, stop loss, take profit, confidence %, time horizon, and a human-readable explanation.
- Expose clean **webhook endpoints** so I can connect it to **n8n** and then to Discord / Telegram bots.

====================================
1. TECH STACK & PROJECT STRUCTURE
====================================

Use a stack that runs well on Hugging Face Spaces:

- **Backend**: Python 3, FastAPI (or a lightweight API framework) for REST endpoints.
- **Frontend**: React + TypeScript + Vite (or Next.js without server-side rendering), styled with TailwindCSS.
- **App wrapper for HF Space**: A simple `app.py` that mounts the FastAPI and serves the built frontend (or use `Gradio` just as a wrapper hosting the frontend in an iframe).

Project structure (example):

- `app.py` – HF entry point.
- `backend/`
- `main.py` – FastAPI app, routing.
- `models_registry.py` – central registry of Hugging Face models used.
- `signal_engine.py` – core logic that combines all AI outputs into one signal.
- `image_analysis.py` – screenshot parsing and pattern detection.
- `timeseries_analysis.py` – price data handling and forecasting.
- `sentiment_analysis.py` – news/social sentiment functions.
- `config.py` – env var loading (API keys, base URLs).
- `frontend/`
- `index.html`
- `src/`
- `main.tsx`
- `App.tsx`
- `components/` (Navbar, Sidebar, ChartUploadCard, PairSelector, SignalPanel, HistoryTable, ModelSettingsPanel, etc.)
- `pages/` (Dashboard, Backtest, Settings, Docs)
- `lib/api.ts` – API client for FastAPI endpoints.

Include a `requirements.txt` and a simple `README.md` with how to run locally and in Spaces.

====================================
2. CORE USER FLOWS
====================================

The app should support two main workflows:

**(A) Screenshot Signal (Tradvio-style but stronger)**
1. User uploads a PNG/JPEG of their trading chart (like from TradingView, Bybit, Binance, etc.).
2. Backend:
- Uses a vision model from Hugging Face (e.g. `microsoft/resnet-50` or another suitable vision transformer) to extract features from the image.
- Optionally uses OCR (like `microsoft/trocr-base-stage1` or any HF OCR model) to read prices, labels, and text on the chart.
- Passes the extracted info into an LLM (e.g. `Qwen/QwQ-32B` or another instruction-following open-source LLM on HF) with a system prompt that explains:
- Identify trend (bullish, bearish, range).
- Detect major support/resistance and patterns (S/R flips, trendlines, wedges, channels, double tops/bottoms, etc.).
- Decide if this looks like a BUY, SELL, or NO-TRADE zone.
- Propose ENTRY, STOP LOSS, and 1–3 TAKE PROFIT targets.
- Provide a confidence score 0–100%.
- Returns structured JSON with:
- `direction`
- `entry_zone`
- `stop_loss`
- `take_profit_levels` (array)
- `timeframe_inferred`
- `confidence`
- `explanation`
3. Frontend shows:
- Uploaded chart preview.
- A card with the **final combined signal**, using color coding:
- Green for long/buy, red for short/sell, gray for neutral.
- Text explanation with bullet points and a “Copy as text” button.

**(B) Live Market Signal (pair + timeframe)**
1. User selects:
- Exchange (just treat as a simple dropdown: Binance, Bybit, KuCoin – no real auth needed yet).
- Crypto pair (e.g. BTCUSDT, ETHUSDT).
- Timeframe (e.g. 5m, 15m, 1h, 4h, 1D).
2. Backend:
- Calls a placeholder market data fetch function (e.g. from Binance public API) OR, if external internet is not allowed, simulate candles with random data but design the code in a way that’s easy to connect to real API later.
- Uses a Hugging Face **time-series model** or generic transformer to analyze candles and predict short-term bias (e.g. `huggingface/time-series-transformer-*` or any suitable open-source model).
- Uses a **technical analysis module** (like TA-Lib or custom functions) to compute indicators: EMA, RSI, MACD, ATR, etc.
- Feeds both model predictions and technical data into the **signal engine** (see section 3) to produce a structured signal with the same schema as above.
3. Frontend shows:
- Pair + timeframe at top.
- A small sparkline / candle mini-chart (can use a simple JS chart library using returned OHLC).
- Signal cards for:
- HTF Bias (higher timeframe trend)
- LTF Bias (current timeframe)
- Suggested position type (Scalp / Swing / No Trade)
- A mini “What this means” text for beginners.

====================================
3. MULTI-MODEL SIGNAL ENGINE
====================================

Implement a `SignalEngine` class in `signal_engine.py` that:

- Accepts inputs from:
- Vision + OCR (from screenshot).
- Time-series model outputs (price prediction, volatility).
- Sentiment model outputs (optional).
- Technical indicators (EMA, RSI, etc.).
- Normalizes everything into a common score from -1 (strong short) to +1 (strong long).
- Uses simple, transparent rules to combine scores:
- Example: weighted average of:
- Trend score (0.4)
- Momentum score (0.2)
- Pattern score (0.2)
- Sentiment score (0.2)
- Converts the final score into:
- `direction`: LONG / SHORT / NEUTRAL
- `confidence`: 0–100%
- Calculates:
- `entry_zone` using recent swing high/low plus a small buffer.
- `stop_loss` using ATR or last structure high/low.
- `take_profit_levels` as 1:2 and 1:3 risk-reward multiples.
- Returns consistent JSON so front-end can always render.

In `models_registry.py`:
- Create a simple registry mapping model names to tasks and HF model IDs, for example:
- `"vision_feature_extractor"` → `google/vit-base-patch16-224`
- `"ocr"` → some TrOCR model
- `"sentiment"` → `yiyanghkust/finbert-tone` or similar financial sentiment model
- `"general_llm"` → some chat/instruction model on HF
- This makes it easy to plug in **any future Hugging Face models** without rewriting the whole app.

====================================
4. INTEGRATIONS: N8N & DISCORD
====================================

The app DOES NOT directly auto-trade. It only sends signals out via webhooks so that users can automate in n8n or elsewhere.

Backend:
- Expose an endpoint: `POST /api/signals/webhook-test`
- Accepts a JSON payload `{ pair, timeframe, direction, entry_zone, stop_loss, take_profit_levels, confidence, explanation }`.
- Also accepts an optional `webhook_url`.
- If `webhook_url` is present, send the signal JSON to that URL (for n8n or Discord webhook).
- Include a simple helper in docs:
- Example n8n workflow: HTTP Trigger → send to Discord / Telegram / broker API.
- Store `WEBHOOK_DEFAULT_URL` and `DISCORD_WEBHOOK_URL` as environment variables via `config.py`, but don’t hard-code any real secrets.

Frontend:
- In **Settings** page, allow user to:
- Paste a `Webhook URL`.
- Toggle “Auto-send signal to webhook when generated”.
- Add a button “Send this signal to webhook” on each signal result card.

====================================
5. PAGES & UI DESIGN
====================================

Overall layout inspired by modern trading dashboards and Tradvio, but unique:

- **Top Navbar**:
- Logo text: `CryptoSignal-Sleuth`
- Right side: “Dashboard”, “Backtest (coming soon)”, “Settings”, “Docs”
- **Left Sidebar**:
- Section “Analysis Modes”:
- Screenshot Analyzer
- Live Market Analyzer
- Section “History”: shows a list of last 20 signals with pair, direction, timestamp and confidence.

**Dashboard Page layout:**
- Two-column responsive layout.
- Left column:
- Card: “Upload Chart Screenshot”
- Drop-zone, preview thumbnail, “Analyze Screenshot” button.
- Card: “Live Market Selector”
- Exchange dropdown, pair input, timeframe dropdown, “Analyze Market” button.
- Right column:
- Card: “Latest Signal”
- Large status badge (LONG / SHORT / NEUTRAL).
- Entry, SL, TP levels in a small table.
- Confidence % with a simple progress bar.
- “Copy signal as text” button.
- “Send to webhook” button.
- Card: “Explanation”
- Bullet point reasoning from the LLM.
- Small disclaimer text.

**History / Table:**
- Simple table listing:
- Timestamp
- Mode (Screenshot / Live)
- Pair / Instrument
- Direction
- Confidence
- Click a row → open a modal with full details and explanation.

**Settings Page:**
- Text inputs for:
- Default Pair
- Default Timeframe
- Webhook URL
- Risk settings (default RR, max risk per trade – just for display in explanation, not enforcement).
- Save settings to browser localStorage.

**Docs Page:**
- Plain text/Markdown rendered section that explains:
- What the app does.
- What models are used (with links to Hugging Face model cards, use placeholders).
- Clear disclaimer: not financial advice.

Use a clean dark theme suitable for trading:
- Dark background, subtle cards, readable fonts.
- Make sure everything is mobile-responsive.

====================================
6. API DESIGN (BACKEND)
====================================

Implement the following FastAPI routes:

- `POST /api/analyze/screenshot`
- `multipart/form-data` with `file`
- Returns structured signal JSON.
- `POST /api/analyze/market`
- JSON body: `{ pair, timeframe, exchange? }`
- Returns structured signal JSON.
- `GET /api/history`
- Returns last N saved signals from

README.md

@@ -1,10 +1,13 @@
 ---
-title: Cryptosignal Sleuth Pro
-emoji: 👁
-colorFrom: indigo
-colorTo: red
+title: CryptoSignal Sleuth Pro 🕵️‍♂️💹
+colorFrom: gray
+colorTo: green
+emoji: 🐳
 sdk: static
 pinned: false
+tags:
+  - deepsite-v3
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# Welcome to your new DeepSite project!
+This project was created with [DeepSite](https://huggingface.co/deepsite).

index.html

@@ -1,19 +1,121 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>CryptoSignal Sleuth Pro</title>
+    <link rel="stylesheet" href="style.css">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://unpkg.com/feather-icons"></script>
+    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
+    <script>
+        tailwind.config = {
+            theme: {
+                extend: {
+                    colors: {
+                        primary: {
+                            500: '#6366f1',
+                        },
+                        secondary: {
+                            500: '#ec4899',
+                        }
+                    }
+                }
+            }
+        }
+    </script>
+</head>
+<body class="bg-gray-900 text-gray-100">
+    <custom-navbar></custom-navbar>
+    
+    <div class="container mx-auto px-4 py-8">
+        <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
+            <!-- Chart Upload Section -->
+            <div class="bg-gray-800 rounded-xl p-6 shadow-lg">
+                <h2 class="text-xl font-bold mb-4 flex items-center gap-2">
+                    <i data-feather="upload"></i>
+                    Upload Chart Screenshot
+                </h2>
+                <div class="border-2 border-dashed border-gray-600 rounded-lg p-8 text-center cursor-pointer hover:border-indigo-500 transition-colors">
+                    <i data-feather="image" class="w-12 h-12 mx-auto mb-4 text-gray-400"></i>
+                    <p class="text-gray-400 mb-2">Drag & drop your trading chart screenshot here</p>
+                    <p class="text-sm text-gray-500">Supports PNG, JPG up to 5MB</p>
+                    <input type="file" class="hidden" id="chart-upload" accept="image/*">
+                </div>
+                <button id="analyze-btn" class="mt-4 w-full bg-indigo-600 hover:bg-indigo-700 text-white font-medium py-2 px-4 rounded-lg flex items-center justify-center gap-2">
+                    <i data-feather="zap"></i>
+                    Analyze Chart
+                </button>
+            </div>
+
+            <!-- Live Market Analysis -->
+            <div class="bg-gray-800 rounded-xl p-6 shadow-lg">
+                <h2 class="text-xl font-bold mb-4 flex items-center gap-2">
+                    <i data-feather="activity"></i>
+                    Live Market Analysis
+                </h2>
+                <div class="space-y-4">
+                    <div>
+                        <label class="block text-sm font-medium mb-1">Exchange</label>
+                        <select class="w-full bg-gray-700 border border-gray-600 rounded-lg px-3 py-2 focus:ring-indigo-500 focus:border-indigo-500">
+                            <option>Binance</option>
+                            <option>Bybit</option>
+                            <option>KuCoin</option>
+                        </select>
+                    </div>
+                    <div>
+                        <label class="block text-sm font-medium mb-1">Pair</label>
+                        <input type="text" placeholder="BTCUSDT" class="w-full bg-gray-700 border border-gray-600 rounded-lg px-3 py-2 focus:ring-indigo-500 focus:border-indigo-500">
+                    </div>
+                    <div>
+                        <label class="block text-sm font-medium mb-1">Timeframe</label>
+                        <select class="w-full bg-gray-700 border border-gray-600 rounded-lg px-3 py-2 focus:ring-indigo-500 focus:border-indigo-500">
+                            <option>5m</option>
+                            <option>15m</option>
+                            <option>1h</option>
+                            <option>4h</option>
+                            <option>1D</option>
+                        </select>
+                    </div>
+                    <button class="mt-2 w-full bg-pink-600 hover:bg-pink-700 text-white font-medium py-2 px-4 rounded-lg flex items-center justify-center gap-2">
+                        <i data-feather="bar-chart-2"></i>
+                        Analyze Market
+                    </button>
+                </div>
+            </div>
+        </div>
+
+        <!-- Results Section -->
+        <div id="results-section" class="mt-8 hidden">
+            <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
+                <!-- Signal Card -->
+                <div class="bg-gray-800 rounded-xl p-6 shadow-lg">
+                    <h2 class="text-xl font-bold mb-4">Signal Analysis</h2>
+                    <div class="flex items-center mb-6">
+                        <div id="signal-direction" class="px-4 py-2 rounded-lg font-bold mr-4">
+                            LONG
+                        </div>
+                        <div class="w-full bg-gray-700 h-4 rounded-full overflow-hidden">
+                            <div id="confidence-bar" class="h-full bg-indigo-500" style="width: 75%"></div>
+                        </div>
+                        <span id="confidence-text" class="ml-2 font-medium">75%</span>
+                    </div>
+                    <div class="space-y-4">
+                        <div class="flex justify-between">
+                            <span class="text-gray-400">Entry Zone</span>
+                            <span id="entry-zone" class="font-medium">$42,300 - $42,500</span>
+                        </div>
+                        <div class="flex justify-between">
+                            <span class="text-gray-400">Stop Loss</span>
+                            <span id="stop-loss" class="font-medium">$41,800</span>
+                        </div>
+                        <div class="flex justify-between">
+                            <span class="text-gray-400">Take Profit 1</span>
+                            <span id="tp1" class="font-medium">$43,200</span>
+                        </div>
+                        <div class="flex justify-between">
+                            <span class="text-gray-400">Take Profit 2</span>
+                            <span id="tp2{"ok":false,"message":"terminated"}
+<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
+</body>
+</html>