Spaces:
Running
Running
| from fastapi import FastAPI, HTTPException, Request | |
| from fastapi.staticfiles import StaticFiles | |
| from fastapi.templating import Jinja2Templates | |
| from fastapi.responses import HTMLResponse, JSONResponse | |
| from pydantic import BaseModel | |
| import asyncio | |
| import json | |
| from datetime import datetime | |
| import time | |
| from typing import List, Dict, Any, Optional | |
| import os | |
| from dotenv import load_dotenv | |
| import plotly | |
| import plotly.graph_objects as go | |
| load_dotenv() | |
| from src.agent.research_agent import Web3ResearchAgent | |
| from src.api.airaa_integration import AIRAAIntegration | |
| from src.utils.logger import get_logger | |
| from src.utils.config import config | |
| from src.visualizations import CryptoVisualizations | |
| logger = get_logger(__name__) | |
| app = FastAPI( | |
| title="Web3 Research Co-Pilot", | |
| description="Professional cryptocurrency research assistant", | |
| version="2.0.0" | |
| ) | |
| # Pydantic models | |
| class QueryRequest(BaseModel): | |
| query: str | |
| chat_history: Optional[List[Dict[str, str]]] = [] | |
| class QueryResponse(BaseModel): | |
| success: bool | |
| response: str | |
| sources: Optional[List[str]] = [] | |
| metadata: Optional[Dict[str, Any]] = {} | |
| visualizations: Optional[List[str]] = [] | |
| error: Optional[str] = None | |
| class Web3CoPilotService: | |
| def __init__(self): | |
| try: | |
| logger.info("Initializing Web3 Research Service...") | |
| if config.GEMINI_API_KEY: | |
| logger.info("AI research capabilities enabled") | |
| self.agent = Web3ResearchAgent() | |
| self.enabled = self.agent.enabled | |
| else: | |
| logger.info("AI research capabilities disabled - API key required") | |
| self.agent = None | |
| self.enabled = False | |
| # Initialize integrations | |
| logger.info("Initializing external integrations...") | |
| try: | |
| self.airaa = AIRAAIntegration() | |
| except Exception as e: | |
| logger.warning("External integration unavailable") | |
| self.airaa = None | |
| # Initialize visualization tools | |
| try: | |
| self.viz = CryptoVisualizations() | |
| except Exception as e: | |
| logger.warning("Visualization tools unavailable") | |
| self.viz = None | |
| logger.info(f"Service initialized successfully (AI enabled: {self.enabled})") | |
| except Exception as e: | |
| logger.error(f"Service initialization failed") | |
| self.enabled = False | |
| self.agent = None | |
| self.airaa = None | |
| self.viz = None | |
| async def process_query(self, query: str) -> QueryResponse: | |
| """Process research query with comprehensive analysis""" | |
| logger.info("Processing research request...") | |
| if not query.strip(): | |
| logger.warning("Empty query received") | |
| return QueryResponse( | |
| success=False, | |
| response="Please provide a research query.", | |
| error="Empty query" | |
| ) | |
| try: | |
| if not self.enabled: | |
| logger.info("Processing in limited mode") | |
| response = """**Research Assistant - Limited Mode** | |
| API access available for basic cryptocurrency data: | |
| • Market prices and statistics | |
| • DeFi protocol information | |
| • Network gas fees | |
| Configure GEMINI_API_KEY environment variable for full AI analysis.""" | |
| return QueryResponse(success=True, response=response, sources=["System"]) | |
| logger.info("🤖 Processing with AI research agent...") | |
| logger.info(f"🛠️ Available tools: {[tool.name for tool in self.agent.tools] if self.agent else []}") | |
| result = await self.agent.research_query(query) | |
| logger.info(f"🔄 Agent research completed: success={result.get('success')}") | |
| if result.get("success"): | |
| response = result.get("result", "No analysis generated") | |
| sources = result.get("sources", []) | |
| metadata = result.get("metadata", {}) | |
| logger.info(f"📊 Response generated: {len(response)} chars, {len(sources)} sources") | |
| # Check for chart data and generate visualizations | |
| visualizations = [] | |
| chart_data = await self._extract_chart_data_from_response(response) | |
| if chart_data: | |
| chart_html = await self._generate_chart_from_data(chart_data) | |
| if chart_html: | |
| visualizations.append(chart_html) | |
| logger.info("✅ Chart generated from structured data") | |
| # Clean the response for user display | |
| cleaned_response = self._clean_agent_response(response) | |
| # Generate visualizations if relevant data is available | |
| if metadata: | |
| logger.info("📈 Checking for visualization data...") | |
| vis_html = await self._generate_visualizations(metadata, query) | |
| if vis_html: | |
| visualizations.append(vis_html) | |
| logger.info("✅ Visualization generated") | |
| # Send to AIRAA if enabled | |
| if self.airaa and self.airaa.enabled: | |
| try: | |
| await self.airaa.send_research_data(query, response) | |
| logger.info("📤 Data sent to AIRAA") | |
| except Exception as e: | |
| logger.warning(f"⚠️ AIRAA integration failed: {e}") | |
| return QueryResponse( | |
| success=True, | |
| response=cleaned_response, | |
| sources=sources, | |
| metadata=metadata, | |
| visualizations=visualizations | |
| ) | |
| else: | |
| error_msg = result.get("error", "Research analysis failed") | |
| logger.error(f"❌ Research failed: {error_msg}") | |
| return QueryResponse(success=False, response=error_msg, error=error_msg) | |
| except Exception as e: | |
| logger.error(f"💥 Query processing error: {e}", exc_info=True) | |
| error_msg = f"Processing error: {str(e)}" | |
| return QueryResponse(success=False, response=error_msg, error=error_msg) | |
| async def _generate_visualizations(self, metadata: Dict[str, Any], query: str) -> Optional[str]: | |
| """Generate visualizations based on query and metadata""" | |
| try: | |
| # Check for price data | |
| if 'price_data' in metadata: | |
| symbol = self._extract_symbol_from_query(query) | |
| fig = self.visualizer.create_price_chart(metadata['price_data'], symbol) | |
| return plotly.io.to_html(fig, include_plotlyjs='cdn', div_id='price_chart') | |
| # Check for market data | |
| elif 'market_data' in metadata: | |
| fig = self.visualizer.create_market_overview(metadata['market_data']) | |
| return plotly.io.to_html(fig, include_plotlyjs='cdn', div_id='market_overview') | |
| # Check for DeFi data | |
| elif 'defi_data' in metadata: | |
| fig = self.visualizer.create_defi_tvl_chart(metadata['defi_data']) | |
| return plotly.io.to_html(fig, include_plotlyjs='cdn', div_id='defi_chart') | |
| return None | |
| except Exception as e: | |
| logger.error(f"Visualization generation failed: {e}") | |
| return None | |
| def _extract_symbol_from_query(self, query: str) -> str: | |
| """Extract cryptocurrency symbol from query""" | |
| symbols = ['BTC', 'ETH', 'ADA', 'SOL', 'AVAX', 'MATIC', 'DOT', 'LINK'] | |
| query_upper = query.upper() | |
| for symbol in symbols: | |
| if symbol in query_upper: | |
| return symbol | |
| return 'BTC' # Default | |
| async def _extract_chart_data_from_response(self, response: str) -> Optional[Dict[str, Any]]: | |
| """Extract chart data JSON from agent response""" | |
| try: | |
| import re | |
| import json | |
| logger.info(f"🔍 Checking response for chart data (length: {len(response)} chars)") | |
| # Look for JSON objects containing chart_type - find opening brace and matching closing brace | |
| chart_data_found = None | |
| lines = response.split('\n') | |
| for i, line in enumerate(lines): | |
| if '"chart_type"' in line and line.strip().startswith('{'): | |
| # Found potential start of chart JSON | |
| json_start = i | |
| brace_count = 0 | |
| json_lines = [] | |
| for j in range(i, len(lines)): | |
| current_line = lines[j] | |
| json_lines.append(current_line) | |
| # Count braces to find matching close | |
| brace_count += current_line.count('{') - current_line.count('}') | |
| if brace_count == 0: | |
| # Found complete JSON object | |
| json_text = '\n'.join(json_lines) | |
| try: | |
| chart_data = json.loads(json_text.strip()) | |
| if chart_data.get("chart_type") and chart_data.get("chart_type") != "error": | |
| logger.info(f"✅ Found valid chart data: {chart_data.get('chart_type')}") | |
| return chart_data | |
| except json.JSONDecodeError: | |
| # Try without newlines | |
| try: | |
| json_text_clean = json_text.replace('\n', '').replace(' ', ' ') | |
| chart_data = json.loads(json_text_clean) | |
| if chart_data.get("chart_type") and chart_data.get("chart_type") != "error": | |
| logger.info(f"✅ Found valid chart data (cleaned): {chart_data.get('chart_type')}") | |
| return chart_data | |
| except json.JSONDecodeError: | |
| continue | |
| break | |
| # Fallback to original regex approach for single-line JSON | |
| json_pattern = r'\{[^{}]*"chart_type"[^{}]*\}|\{(?:[^{}]|\{[^{}]*\})*"chart_type"(?:[^{}]|\{[^{}]*\})*\}' | |
| matches = re.findall(json_pattern, response, re.DOTALL) | |
| logger.info(f" Found {len(matches)} potential chart data objects") | |
| for match in matches: | |
| try: | |
| # Clean up the JSON | |
| cleaned_match = match.replace('\\"', '"').replace('\\n', '\n') | |
| chart_data = json.loads(cleaned_match) | |
| if chart_data.get("chart_type") and chart_data.get("chart_type") != "error": | |
| logger.info(f"✅ Valid chart data found: {chart_data.get('chart_type')}") | |
| return chart_data | |
| except json.JSONDecodeError: | |
| continue | |
| logger.info("⚠️ No valid chart data found in response") | |
| return None | |
| except Exception as e: | |
| logger.error(f"Chart data extraction error: {e}") | |
| return None | |
| async def _generate_chart_from_data(self, chart_data: Dict[str, Any]) -> Optional[str]: | |
| """Generate HTML visualization from chart data""" | |
| try: | |
| if not self.viz: | |
| logger.warning("Visualization tools not available") | |
| return None | |
| chart_type = chart_data.get("chart_type") | |
| data = chart_data.get("data", {}) | |
| config = chart_data.get("config", {}) | |
| logger.info(f"Generating {chart_type} chart with data keys: {list(data.keys())}") | |
| if chart_type == "price_chart": | |
| fig = self.viz.create_price_chart(data, data.get("symbol", "BTC")) | |
| elif chart_type == "market_overview": | |
| fig = self.viz.create_market_overview(data.get("coins", [])) | |
| elif chart_type == "defi_tvl": | |
| fig = self.viz.create_defi_tvl_chart(data.get("protocols", [])) | |
| elif chart_type == "portfolio_pie": | |
| # Convert allocation data to the expected format | |
| allocations = {item["name"]: item["value"] for item in data.get("allocations", [])} | |
| fig = self.viz.create_portfolio_pie_chart(allocations) | |
| elif chart_type == "gas_tracker": | |
| fig = self.viz.create_gas_tracker(data) | |
| else: | |
| logger.warning(f"Unknown chart type: {chart_type}") | |
| return None | |
| # Convert to HTML - use div_id and config for embedding | |
| chart_id = f'chart_{chart_type}_{int(time.time())}' | |
| # Generate HTML with inline Plotly for reliable rendering | |
| html = fig.to_html( | |
| include_plotlyjs='inline', # Embed Plotly directly - no CDN issues | |
| div_id=chart_id, | |
| config={'responsive': True, 'displayModeBar': False} | |
| ) | |
| # With inline Plotly, we need to extract the body content only | |
| import re | |
| # Extract everything between <body> and </body> | |
| body_match = re.search(r'<body[^>]*>(.*?)</body>', html, re.DOTALL) | |
| if body_match: | |
| chart_html = body_match.group(1).strip() | |
| logger.info(f"✅ Chart HTML generated ({len(chart_html)} chars) - inline format") | |
| return chart_html | |
| else: | |
| # Fallback - return the full HTML minus the html/head/body tags | |
| # Remove full document structure, keep only the content | |
| cleaned_html = re.sub(r'<html[^>]*>.*?<body[^>]*>', '', html, flags=re.DOTALL) | |
| cleaned_html = re.sub(r'</body>.*?</html>', '', cleaned_html, flags=re.DOTALL) | |
| logger.info(f"✅ Chart HTML generated ({len(cleaned_html)} chars) - cleaned format") | |
| return cleaned_html.strip() | |
| except Exception as e: | |
| logger.error(f"Chart generation error: {e}") | |
| return None | |
| def _clean_agent_response(self, response: str) -> str: | |
| """Clean agent response by removing JSON data blocks""" | |
| try: | |
| import re | |
| # Method 1: Remove complete JSON objects with balanced braces that contain chart_type | |
| lines = response.split('\n') | |
| cleaned_lines = [] | |
| skip_mode = False | |
| brace_count = 0 | |
| for line in lines: | |
| if not skip_mode: | |
| if '"chart_type"' in line and line.strip().startswith('{'): | |
| # Found start of chart JSON - start skipping | |
| skip_mode = True | |
| brace_count = line.count('{') - line.count('}') | |
| if brace_count == 0: | |
| # Single line JSON, skip this line | |
| skip_mode = False | |
| continue | |
| else: | |
| cleaned_lines.append(line) | |
| else: | |
| # In skip mode - count braces to find end | |
| brace_count += line.count('{') - line.count('}') | |
| if brace_count <= 0: | |
| # Found end of JSON block | |
| skip_mode = False | |
| # Skip this line in any case | |
| cleaned = '\n'.join(cleaned_lines) | |
| # Method 2: Fallback regex for any remaining JSON patterns | |
| json_patterns = [ | |
| r'\{[^{}]*"chart_type"[^{}]*\}', # Simple single-line JSON | |
| r'```json\s*\{.*?"chart_type".*?\}\s*```', # Markdown JSON blocks | |
| ] | |
| for pattern in json_patterns: | |
| cleaned = re.sub(pattern, '', cleaned, flags=re.DOTALL) | |
| # Clean up extra whitespace | |
| cleaned = re.sub(r'\n\s*\n\s*\n+', '\n\n', cleaned) | |
| cleaned = cleaned.strip() | |
| return cleaned | |
| except Exception as e: | |
| logger.error(f"Response cleaning error: {e}") | |
| return response | |
| # Initialize service | |
| service = Web3CoPilotService() | |
| async def get_homepage(request: Request): | |
| """Serve minimalist, professional interface""" | |
| html_content = """ | |
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Web3 Research Co-Pilot</title> | |
| <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22><path fill=%22%2300d4aa%22 d=%22M12 2L2 7v10c0 5.5 3.8 7.7 9 9 5.2-1.3 9-3.5 9-9V7l-10-5z%22/></svg>"> | |
| <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script> | |
| <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet"> | |
| <style> | |
| :root { | |
| --primary: #0066ff; | |
| --primary-dark: #0052cc; | |
| --accent: #00d4aa; | |
| --background: #000000; | |
| --surface: #111111; | |
| --surface-elevated: #1a1a1a; | |
| --text: #ffffff; | |
| --text-secondary: #a0a0a0; | |
| --text-muted: #666666; | |
| --border: rgba(255, 255, 255, 0.08); | |
| --border-focus: rgba(0, 102, 255, 0.3); | |
| --shadow: rgba(0, 0, 0, 0.4); | |
| --success: #00d4aa; | |
| --warning: #ffa726; | |
| --error: #f44336; | |
| } | |
| [data-theme="light"] { | |
| --background: #ffffff; | |
| --surface: #f8f9fa; | |
| --surface-elevated: #ffffff; | |
| --text: #1a1a1a; | |
| --text-secondary: #4a5568; | |
| --text-muted: #718096; | |
| --border: rgba(0, 0, 0, 0.08); | |
| --border-focus: rgba(0, 102, 255, 0.3); | |
| --shadow: rgba(0, 0, 0, 0.1); | |
| } | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease; | |
| } | |
| body { | |
| font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', system-ui, sans-serif; | |
| background: var(--background); | |
| color: var(--text); | |
| line-height: 1.5; | |
| min-height: 100vh; | |
| font-weight: 400; | |
| -webkit-font-smoothing: antialiased; | |
| -moz-osx-font-smoothing: grayscale; | |
| } | |
| .container { | |
| max-width: 1000px; | |
| margin: 0 auto; | |
| padding: 2rem 1.5rem; | |
| } | |
| .header { | |
| text-align: center; | |
| margin-bottom: 2.5rem; | |
| } | |
| .header-content { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| max-width: 100%; | |
| } | |
| .header-text { | |
| flex: 1; | |
| text-align: center; | |
| } | |
| .theme-toggle { | |
| background: var(--surface); | |
| border: 1px solid var(--border); | |
| border-radius: 8px; | |
| padding: 0.75rem; | |
| color: var(--text); | |
| cursor: pointer; | |
| transition: all 0.2s ease; | |
| font-size: 1.1rem; | |
| min-width: 44px; | |
| height: 44px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| } | |
| .theme-toggle:hover { | |
| background: var(--surface-elevated); | |
| border-color: var(--primary); | |
| transform: translateY(-1px); | |
| } | |
| .header h1 { | |
| font-size: 2.25rem; | |
| font-weight: 600; | |
| color: var(--text); | |
| margin-bottom: 0.5rem; | |
| letter-spacing: -0.025em; | |
| } | |
| .header .brand { | |
| color: var(--primary); | |
| } | |
| .header p { | |
| color: var(--text-secondary); | |
| font-size: 1rem; | |
| font-weight: 400; | |
| } | |
| .status { | |
| background: var(--surface); | |
| border: 1px solid var(--border); | |
| border-radius: 12px; | |
| padding: 1rem 1.5rem; | |
| margin-bottom: 2rem; | |
| text-align: center; | |
| transition: all 0.2s ease; | |
| } | |
| .status.online { | |
| border-color: var(--success); | |
| background: linear-gradient(135deg, rgba(0, 212, 170, 0.05), rgba(0, 212, 170, 0.02)); | |
| } | |
| .status.offline { | |
| border-color: var(--error); | |
| background: linear-gradient(135deg, rgba(244, 67, 54, 0.05), rgba(244, 67, 54, 0.02)); | |
| } | |
| .status.checking { | |
| border-color: var(--warning); | |
| background: linear-gradient(135deg, rgba(255, 167, 38, 0.05), rgba(255, 167, 38, 0.02)); | |
| animation: pulse 2s infinite; | |
| } | |
| @keyframes pulse { | |
| 0%, 100% { opacity: 1; } | |
| 50% { opacity: 0.8; } | |
| } | |
| .chat-interface { | |
| background: var(--surface); | |
| border: 1px solid var(--border); | |
| border-radius: 16px; | |
| overflow: hidden; | |
| margin-bottom: 2rem; | |
| backdrop-filter: blur(20px); | |
| } | |
| .chat-messages { | |
| height: 480px; | |
| overflow-y: auto; | |
| padding: 2rem; | |
| background: linear-gradient(180deg, var(--background), var(--surface)); | |
| } | |
| .chat-messages::-webkit-scrollbar { | |
| width: 3px; | |
| } | |
| .chat-messages::-webkit-scrollbar-track { | |
| background: transparent; | |
| } | |
| .chat-messages::-webkit-scrollbar-thumb { | |
| background: var(--border); | |
| border-radius: 2px; | |
| } | |
| .message { | |
| margin-bottom: 2rem; | |
| opacity: 0; | |
| animation: messageSlide 0.4s cubic-bezier(0.2, 0, 0.2, 1) forwards; | |
| } | |
| @keyframes messageSlide { | |
| from { | |
| opacity: 0; | |
| transform: translateY(20px) scale(0.98); | |
| } | |
| to { | |
| opacity: 1; | |
| transform: translateY(0) scale(1); | |
| } | |
| } | |
| .message.user { | |
| text-align: right; | |
| } | |
| .message.assistant { | |
| text-align: left; | |
| } | |
| .message-content { | |
| display: inline-block; | |
| max-width: 75%; | |
| padding: 1.25rem 1.5rem; | |
| border-radius: 24px; | |
| font-size: 0.95rem; | |
| line-height: 1.6; | |
| position: relative; | |
| } | |
| .message.user .message-content { | |
| background: linear-gradient(135deg, var(--primary), var(--primary-dark)); | |
| color: #ffffff; | |
| border-bottom-right-radius: 8px; | |
| box-shadow: 0 4px 12px rgba(0, 102, 255, 0.2); | |
| } | |
| .message.assistant .message-content { | |
| background: var(--surface-elevated); | |
| color: var(--text); | |
| border-bottom-left-radius: 8px; | |
| border: 1px solid var(--border); | |
| } | |
| .message-content h1, .message-content h2, .message-content h3, .message-content h4 { | |
| color: var(--accent); | |
| margin: 1.25rem 0 0.5rem 0; | |
| font-weight: 600; | |
| line-height: 1.3; | |
| } | |
| .message-content h1 { font-size: 1.25rem; } | |
| .message-content h2 { font-size: 1.1rem; } | |
| .message-content h3 { font-size: 1rem; } | |
| .message-content h4 { font-size: 0.95rem; } | |
| .message-content p { | |
| margin: 0.75rem 0; | |
| line-height: 1.65; | |
| color: var(--text); | |
| } | |
| .message-content ul, .message-content ol { | |
| margin: 0.75rem 0; | |
| padding-left: 1.5rem; | |
| line-height: 1.6; | |
| } | |
| .message-content li { | |
| margin: 0.3rem 0; | |
| line-height: 1.6; | |
| } | |
| .message-content table { | |
| width: 100%; | |
| border-collapse: collapse; | |
| margin: 1rem 0; | |
| font-size: 0.9rem; | |
| } | |
| .message-content th, .message-content td { | |
| border: 1px solid var(--border); | |
| padding: 0.5rem 0.75rem; | |
| text-align: left; | |
| } | |
| .message-content th { | |
| background: var(--surface); | |
| font-weight: 600; | |
| color: var(--accent); | |
| } | |
| .message-content strong { | |
| color: var(--accent); | |
| font-weight: 600; | |
| } | |
| .message-content em { | |
| color: var(--text-secondary); | |
| font-style: italic; | |
| } | |
| .message-content code { | |
| background: rgba(0, 102, 255, 0.12); | |
| border: 1px solid rgba(0, 102, 255, 0.25); | |
| padding: 0.2rem 0.45rem; | |
| border-radius: 4px; | |
| font-family: 'SF Mono', Consolas, 'Courier New', monospace; | |
| font-size: 0.85rem; | |
| color: var(--accent); | |
| font-weight: 500; | |
| } | |
| .message-content pre { | |
| background: var(--background); | |
| border: 1px solid var(--border); | |
| border-radius: 8px; | |
| padding: 1rem; | |
| margin: 1rem 0; | |
| overflow-x: auto; | |
| font-family: 'SF Mono', Consolas, 'Courier New', monospace; | |
| font-size: 0.85rem; | |
| line-height: 1.5; | |
| } | |
| .message-content pre code { | |
| background: none; | |
| border: none; | |
| padding: 0; | |
| font-size: inherit; | |
| } | |
| .message-content blockquote { | |
| border-left: 3px solid var(--accent); | |
| padding-left: 1rem; | |
| margin: 1rem 0; | |
| color: var(--text-secondary); | |
| font-style: italic; | |
| background: rgba(0, 212, 170, 0.05); | |
| padding: 0.75rem 0 0.75rem 1rem; | |
| border-radius: 0 4px 4px 0; | |
| } | |
| .message-content a { | |
| color: var(--accent); | |
| text-decoration: none; | |
| border-bottom: 1px solid transparent; | |
| transition: border-color 0.2s ease; | |
| } | |
| .message-content a:hover { | |
| border-bottom-color: var(--accent); | |
| } | |
| .message.user .message-content { | |
| word-wrap: break-word; | |
| white-space: pre-wrap; | |
| } | |
| .message.user .message-content strong, | |
| .message.user .message-content code { | |
| color: rgba(255, 255, 255, 0.9); | |
| } | |
| .message-meta { | |
| font-size: 0.75rem; | |
| color: var(--text-muted); | |
| margin-top: 0.5rem; | |
| font-weight: 500; | |
| } | |
| .sources { | |
| margin-top: 1rem; | |
| padding-top: 1rem; | |
| border-top: 1px solid var(--border); | |
| font-size: 0.8rem; | |
| color: var(--text-secondary); | |
| } | |
| .sources span { | |
| display: inline-block; | |
| background: rgba(0, 102, 255, 0.1); | |
| border: 1px solid rgba(0, 102, 255, 0.2); | |
| padding: 0.25rem 0.75rem; | |
| border-radius: 6px; | |
| margin: 0.25rem 0.5rem 0.25rem 0; | |
| font-weight: 500; | |
| font-size: 0.75rem; | |
| } | |
| .input-area { | |
| padding: 2rem; | |
| background: linear-gradient(180deg, var(--surface), var(--surface-elevated)); | |
| border-top: 1px solid var(--border); | |
| } | |
| .input-container { | |
| display: flex; | |
| gap: 1rem; | |
| align-items: stretch; | |
| } | |
| .input-field { | |
| flex: 1; | |
| padding: 1rem 1.5rem; | |
| background: var(--background); | |
| border: 2px solid var(--border); | |
| border-radius: 28px; | |
| color: var(--text); | |
| font-size: 0.95rem; | |
| outline: none; | |
| transition: all 0.2s cubic-bezier(0.2, 0, 0.2, 1); | |
| font-weight: 400; | |
| } | |
| .input-field:focus { | |
| border-color: var(--primary); | |
| box-shadow: 0 0 0 4px var(--border-focus); | |
| background: var(--surface); | |
| } | |
| .input-field::placeholder { | |
| color: var(--text-muted); | |
| font-weight: 400; | |
| } | |
| .send-button { | |
| padding: 1rem 2rem; | |
| background: linear-gradient(135deg, var(--primary), var(--primary-dark)); | |
| color: #ffffff; | |
| border: none; | |
| border-radius: 28px; | |
| font-weight: 600; | |
| cursor: pointer; | |
| transition: all 0.2s cubic-bezier(0.2, 0, 0.2, 1); | |
| font-size: 0.95rem; | |
| box-shadow: 0 4px 12px rgba(0, 102, 255, 0.2); | |
| } | |
| .send-button:hover:not(:disabled) { | |
| transform: translateY(-2px); | |
| box-shadow: 0 8px 24px rgba(0, 102, 255, 0.3); | |
| } | |
| .send-button:active { | |
| transform: translateY(0); | |
| } | |
| .send-button:disabled { | |
| opacity: 0.6; | |
| cursor: not-allowed; | |
| transform: none; | |
| box-shadow: 0 4px 12px rgba(0, 102, 255, 0.1); | |
| } | |
| .examples { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); | |
| gap: 1rem; | |
| margin-top: 1rem; | |
| } | |
| .example { | |
| background: linear-gradient(135deg, var(--surface), var(--surface-elevated)); | |
| border: 1px solid var(--border); | |
| border-radius: 12px; | |
| padding: 1.5rem; | |
| cursor: pointer; | |
| transition: all 0.3s cubic-bezier(0.2, 0, 0.2, 1); | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .example::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: -100%; | |
| width: 100%; | |
| height: 100%; | |
| background: linear-gradient(90deg, transparent, rgba(0, 102, 255, 0.05), transparent); | |
| transition: left 0.5s ease; | |
| } | |
| .example:hover::before { | |
| left: 100%; | |
| } | |
| .example:hover { | |
| border-color: var(--primary); | |
| transform: translateY(-4px); | |
| box-shadow: 0 12px 32px rgba(0, 0, 0, 0.2); | |
| background: linear-gradient(135deg, var(--surface-elevated), var(--surface)); | |
| } | |
| .example-title { | |
| font-weight: 600; | |
| color: var(--text); | |
| margin-bottom: 0.5rem; | |
| font-size: 0.95rem; | |
| display: flex; | |
| align-items: center; | |
| gap: 0.5rem; | |
| } | |
| .example-title i { | |
| color: var(--primary); | |
| font-size: 1rem; | |
| width: 20px; | |
| text-align: center; | |
| } | |
| .example-desc { | |
| font-size: 0.85rem; | |
| color: var(--text-secondary); | |
| font-weight: 400; | |
| } | |
| .loading { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 0.5rem; | |
| color: var(--text-secondary); | |
| font-weight: 500; | |
| } | |
| .loading::after { | |
| content: ''; | |
| width: 14px; | |
| height: 14px; | |
| border: 2px solid currentColor; | |
| border-top-color: transparent; | |
| border-radius: 50%; | |
| animation: spin 1s linear infinite; | |
| } | |
| @keyframes spin { | |
| to { transform: rotate(360deg); } | |
| } | |
| .loading-indicator { | |
| display: none; | |
| background: var(--surface-elevated); | |
| border: 1px solid var(--border); | |
| border-radius: 12px; | |
| padding: 1.5rem; | |
| margin: 1rem 0; | |
| text-align: center; | |
| color: var(--text-secondary); | |
| } | |
| .loading-indicator.active { | |
| display: block; | |
| } | |
| .loading-spinner { | |
| display: inline-block; | |
| width: 20px; | |
| height: 20px; | |
| border: 2px solid var(--border); | |
| border-top-color: var(--primary); | |
| border-radius: 50%; | |
| animation: spin 1s linear infinite; | |
| margin-right: 0.5rem; | |
| } | |
| .status-indicator { | |
| position: fixed; | |
| top: 20px; | |
| right: 20px; | |
| background: var(--surface); | |
| border: 1px solid var(--border); | |
| border-radius: 8px; | |
| padding: 0.75rem 1rem; | |
| font-size: 0.85rem; | |
| color: var(--text-secondary); | |
| opacity: 0; | |
| transform: translateY(-10px); | |
| transition: all 0.3s ease; | |
| z-index: 1000; | |
| } | |
| .status-indicator.show { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| .status-indicator.processing { | |
| border-color: var(--primary); | |
| background: linear-gradient(135deg, rgba(0, 102, 255, 0.05), rgba(0, 102, 255, 0.02)); | |
| } | |
| .visualization-container { | |
| margin: 1.5rem 0; | |
| background: var(--surface-elevated); | |
| border-radius: 12px; | |
| padding: 1.5rem; | |
| border: 1px solid var(--border); | |
| } | |
| .welcome { | |
| text-align: center; | |
| padding: 4rem 2rem; | |
| color: var(--text-secondary); | |
| } | |
| .welcome h3 { | |
| font-size: 1.25rem; | |
| font-weight: 600; | |
| margin-bottom: 0.5rem; | |
| color: var(--text); | |
| } | |
| .welcome p { | |
| font-size: 0.95rem; | |
| font-weight: 400; | |
| } | |
| @media (max-width: 768px) { | |
| .container { | |
| padding: 1rem; | |
| } | |
| .header-content { | |
| flex-direction: column; | |
| gap: 1rem; | |
| } | |
| .header-text { | |
| text-align: center; | |
| } | |
| .header h1 { | |
| font-size: 1.75rem; | |
| } | |
| .chat-messages { | |
| height: 400px; | |
| padding: 1.5rem; | |
| } | |
| .message-content { | |
| max-width: 85%; | |
| padding: 1rem 1.25rem; | |
| } | |
| .input-area { | |
| padding: 1.5rem; | |
| } | |
| .input-container { | |
| flex-direction: column; | |
| gap: 0.75rem; | |
| } | |
| .send-button { | |
| align-self: stretch; | |
| } | |
| .examples { | |
| grid-template-columns: 1fr; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="statusIndicator" class="status-indicator"> | |
| <span id="statusText">Ready</span> | |
| </div> | |
| <div class="container"> | |
| <div class="header"> | |
| <div class="header-content"> | |
| <div class="header-text"> | |
| <h1><span class="brand">Web3</span> Research Co-Pilot</h1> | |
| <p>Professional cryptocurrency analysis and market intelligence</p> | |
| </div> | |
| <button id="themeToggle" class="theme-toggle" title="Toggle theme"> | |
| <i class="fas fa-moon"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div id="status" class="status checking"> | |
| <span>Initializing research systems...</span> | |
| </div> | |
| <div class="chat-interface"> | |
| <div id="chatMessages" class="chat-messages"> | |
| <div class="welcome"> | |
| <h3>Welcome to Web3 Research Co-Pilot</h3> | |
| <p>Ask about market trends, DeFi protocols, or blockchain analytics</p> | |
| </div> | |
| </div> | |
| <div id="loadingIndicator" class="loading-indicator"> | |
| <div class="loading-spinner"></div> | |
| <span id="loadingText">Processing your research query...</span> | |
| </div> | |
| <div class="input-area"> | |
| <div class="input-container"> | |
| <input | |
| type="text" | |
| id="queryInput" | |
| class="input-field" | |
| placeholder="Research Bitcoin trends, analyze DeFi yields, compare protocols..." | |
| maxlength="500" | |
| > | |
| <button id="sendBtn" class="send-button">Research</button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="examples"> | |
| <div class="example" onclick="setQuery('Analyze Bitcoin price trends and institutional adoption patterns')"> | |
| <div class="example-title"><i class="fas fa-chart-line"></i> Market Analysis</div> | |
| <div class="example-desc">Bitcoin trends, institutional flows, and market sentiment analysis</div> | |
| </div> | |
| <div class="example" onclick="setQuery('Compare top DeFi protocols by TVL, yield, and risk metrics across chains')"> | |
| <div class="example-title"><i class="fas fa-coins"></i> DeFi Intelligence</div> | |
| <div class="example-desc">Protocol comparison, yield analysis, and cross-chain opportunities</div> | |
| </div> | |
| <div class="example" onclick="setQuery('Evaluate Ethereum Layer 2 scaling solutions and adoption metrics')"> | |
| <div class="example-title"><i class="fas fa-layer-group"></i> Layer 2 Research</div> | |
| <div class="example-desc">Scaling solutions, transaction costs, and ecosystem growth</div> | |
| </div> | |
| <div class="example" onclick="setQuery('Find optimal yield farming strategies with risk assessment')"> | |
| <div class="example-title"><i class="fas fa-seedling"></i> Yield Optimization</div> | |
| <div class="example-desc">Cross-chain opportunities, APY tracking, and risk analysis</div> | |
| </div> | |
| <div class="example" onclick="setQuery('Track whale movements and large Bitcoin transactions today')"> | |
| <div class="example-title"><i class="fas fa-fish"></i> Whale Tracking</div> | |
| <div class="example-desc">Large transactions, wallet analysis, and market impact</div> | |
| </div> | |
| <div class="example" onclick="setQuery('Analyze gas fees and network congestion across blockchains')"> | |
| <div class="example-title"><i class="fas fa-tachometer-alt"></i> Network Analytics</div> | |
| <div class="example-desc">Gas prices, network utilization, and cost comparisons</div> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| let chatHistory = []; | |
| let messageCount = 0; | |
| async function checkStatus() { | |
| try { | |
| const response = await fetch('/status'); | |
| const status = await response.json(); | |
| const statusDiv = document.getElementById('status'); | |
| if (status.enabled && status.gemini_configured) { | |
| statusDiv.className = 'status online'; | |
| statusDiv.innerHTML = ` | |
| <span>Research systems online</span> | |
| <div style="margin-top: 0.5rem; font-size: 0.85rem; opacity: 0.8;"> | |
| Tools: ${status.tools_available.join(' • ')} | |
| </div> | |
| `; | |
| } else { | |
| statusDiv.className = 'status offline'; | |
| statusDiv.innerHTML = ` | |
| <span>Limited mode - Configure GEMINI_API_KEY for full functionality</span> | |
| <div style="margin-top: 0.5rem; font-size: 0.85rem; opacity: 0.8;"> | |
| Available: ${status.tools_available.join(' • ')} | |
| </div> | |
| `; | |
| } | |
| } catch (error) { | |
| const statusDiv = document.getElementById('status'); | |
| statusDiv.className = 'status offline'; | |
| statusDiv.innerHTML = '<span>Connection error</span>'; | |
| } | |
| } | |
| async function sendQuery() { | |
| const input = document.getElementById('queryInput'); | |
| const sendBtn = document.getElementById('sendBtn'); | |
| const loadingIndicator = document.getElementById('loadingIndicator'); | |
| const statusIndicator = document.getElementById('statusIndicator'); | |
| const statusText = document.getElementById('statusText'); | |
| const query = input.value.trim(); | |
| if (!query) { | |
| showStatus('Please enter a research query', 'warning'); | |
| return; | |
| } | |
| console.log('Sending research query'); | |
| addMessage('user', query); | |
| input.value = ''; | |
| // Update UI states | |
| sendBtn.disabled = true; | |
| sendBtn.innerHTML = '<span class="loading">Processing</span>'; | |
| loadingIndicator.classList.add('active'); | |
| showStatus('Processing research query...', 'processing'); | |
| try { | |
| console.log('Making API request...'); | |
| const requestStart = Date.now(); | |
| const response = await fetch('/query', { | |
| method: 'POST', | |
| headers: { 'Content-Type': 'application/json' }, | |
| body: JSON.stringify({ query, chat_history: chatHistory }) | |
| }); | |
| const requestTime = Date.now() - requestStart; | |
| console.log(`Request completed in ${requestTime}ms`); | |
| if (!response.ok) { | |
| throw new Error(`Request failed with status ${response.status}`); | |
| } | |
| const result = await response.json(); | |
| console.log('Response received successfully'); | |
| if (result.success) { | |
| addMessage('assistant', result.response, result.sources, result.visualizations); | |
| showStatus('Research complete', 'success'); | |
| console.log('Analysis completed successfully'); | |
| } else { | |
| console.log('Analysis request failed'); | |
| addMessage('assistant', result.response || 'Analysis temporarily unavailable. Please try again.', [], []); | |
| showStatus('Request failed', 'error'); | |
| } | |
| } catch (error) { | |
| console.error('Request error occurred'); | |
| addMessage('assistant', 'Connection error. Please check your network and try again.'); | |
| showStatus('Connection error', 'error'); | |
| } finally { | |
| // Reset UI states | |
| sendBtn.disabled = false; | |
| sendBtn.innerHTML = 'Research'; | |
| loadingIndicator.classList.remove('active'); | |
| input.focus(); | |
| console.log('Request completed'); | |
| // Hide status after delay | |
| setTimeout(() => hideStatus(), 3000); | |
| } | |
| } | |
| function addMessage(sender, content, sources = [], visualizations = []) { | |
| const messagesDiv = document.getElementById('chatMessages'); | |
| // Clear welcome message | |
| if (messageCount === 0) { | |
| messagesDiv.innerHTML = ''; | |
| } | |
| messageCount++; | |
| const messageDiv = document.createElement('div'); | |
| messageDiv.className = `message ${sender}`; | |
| let sourcesHtml = ''; | |
| if (sources && sources.length > 0) { | |
| sourcesHtml = ` | |
| <div class="sources"> | |
| Sources: ${sources.map(s => `<span>${s}</span>`).join('')} | |
| </div> | |
| `; | |
| } | |
| let visualizationHtml = ''; | |
| if (visualizations && visualizations.length > 0) { | |
| console.log('Processing visualizations:', visualizations.length); | |
| visualizationHtml = visualizations.map((viz, index) => { | |
| console.log(`Visualization ${index}:`, viz.substring(0, 100)); | |
| return `<div class="visualization-container" id="viz-${Date.now()}-${index}">${viz}</div>`; | |
| }).join(''); | |
| } | |
| // Format content based on sender | |
| let formattedContent = content; | |
| if (sender === 'assistant') { | |
| // Convert markdown to HTML for assistant responses | |
| try { | |
| formattedContent = marked.parse(content); | |
| } catch (error) { | |
| // Fallback to basic formatting if marked.js fails | |
| console.warn('Markdown parsing failed, using fallback:', error); | |
| formattedContent = content | |
| .replace(/\\n/g, '<br>') | |
| .replace(/\\*\\*(.*?)\\*\\*/g, '<strong>$1</strong>') | |
| .replace(/\\*(.*?)\\*/g, '<em>$1</em>') | |
| .replace(/`(.*?)`/g, '<code>$1</code>'); | |
| } | |
| } else { | |
| // Apply markdown parsing to user messages too | |
| try { | |
| formattedContent = marked.parse(content); | |
| } catch (error) { | |
| formattedContent = content.replace(/\\n/g, '<br>'); | |
| } | |
| } | |
| messageDiv.innerHTML = ` | |
| <div class="message-content"> | |
| ${formattedContent} | |
| ${sourcesHtml} | |
| </div> | |
| ${visualizationHtml} | |
| <div class="message-meta">${new Date().toLocaleTimeString()}</div> | |
| `; | |
| messagesDiv.appendChild(messageDiv); | |
| messagesDiv.scrollTop = messagesDiv.scrollHeight; | |
| // Execute any scripts in the visualizations after DOM insertion | |
| if (visualizations && visualizations.length > 0) { | |
| console.log('Executing visualization scripts...'); | |
| setTimeout(() => { | |
| const scripts = messageDiv.querySelectorAll('script'); | |
| console.log(`Found ${scripts.length} scripts to execute`); | |
| scripts.forEach((script, index) => { | |
| console.log(`Executing script ${index}:`, script.textContent.substring(0, 200) + '...'); | |
| try { | |
| // Execute script in global context using Function constructor | |
| const scriptFunction = new Function(script.textContent); | |
| scriptFunction.call(window); | |
| console.log(`Script ${index} executed successfully`); | |
| } catch (error) { | |
| console.error(`Script ${index} execution error:`, error); | |
| console.error(`Script content preview:`, script.textContent.substring(0, 500)); | |
| } | |
| }); | |
| console.log('All visualization scripts executed'); | |
| }, 100); | |
| } | |
| chatHistory.push({ role: sender, content }); | |
| if (chatHistory.length > 20) chatHistory = chatHistory.slice(-20); | |
| } | |
| function setQuery(query) { | |
| document.getElementById('queryInput').value = query; | |
| setTimeout(() => sendQuery(), 100); | |
| } | |
| // Status management functions | |
| function showStatus(message, type = 'info') { | |
| const statusIndicator = document.getElementById('statusIndicator'); | |
| const statusText = document.getElementById('statusText'); | |
| statusText.textContent = message; | |
| statusIndicator.className = `status-indicator show ${type}`; | |
| } | |
| function hideStatus() { | |
| const statusIndicator = document.getElementById('statusIndicator'); | |
| statusIndicator.classList.remove('show'); | |
| } | |
| // Theme toggle functionality | |
| function toggleTheme() { | |
| const currentTheme = document.documentElement.getAttribute('data-theme'); | |
| const newTheme = currentTheme === 'light' ? 'dark' : 'light'; | |
| const themeIcon = document.querySelector('#themeToggle i'); | |
| document.documentElement.setAttribute('data-theme', newTheme); | |
| localStorage.setItem('theme', newTheme); | |
| // Update icon | |
| if (newTheme === 'light') { | |
| themeIcon.className = 'fas fa-sun'; | |
| } else { | |
| themeIcon.className = 'fas fa-moon'; | |
| } | |
| } | |
| // Initialize theme | |
| function initializeTheme() { | |
| const savedTheme = localStorage.getItem('theme') || 'dark'; | |
| const themeIcon = document.querySelector('#themeToggle i'); | |
| document.documentElement.setAttribute('data-theme', savedTheme); | |
| if (savedTheme === 'light') { | |
| themeIcon.className = 'fas fa-sun'; | |
| } else { | |
| themeIcon.className = 'fas fa-moon'; | |
| } | |
| } | |
| // Event listeners | |
| document.getElementById('queryInput').addEventListener('keypress', (e) => { | |
| if (e.key === 'Enter') sendQuery(); | |
| }); | |
| document.getElementById('sendBtn').addEventListener('click', (e) => { | |
| console.log('Research button clicked'); | |
| e.preventDefault(); | |
| sendQuery(); | |
| }); | |
| document.getElementById('themeToggle').addEventListener('click', toggleTheme); | |
| // Initialize | |
| document.addEventListener('DOMContentLoaded', () => { | |
| console.log('Application initialized'); | |
| initializeTheme(); | |
| checkStatus(); | |
| document.getElementById('queryInput').focus(); | |
| }); | |
| </script> | |
| </body> | |
| </html> | |
| """ | |
| return HTMLResponse(content=html_content) | |
| async def get_status(): | |
| """System status endpoint""" | |
| status = { | |
| "enabled": service.enabled, | |
| "gemini_configured": bool(config.GEMINI_API_KEY), | |
| "tools_available": ["Market Data", "DeFi Analytics", "Network Metrics"], | |
| "airaa_enabled": service.airaa.enabled if service.airaa else False, | |
| "timestamp": datetime.now().isoformat(), | |
| "version": "2.0.0" | |
| } | |
| return status | |
| async def process_query(request: QueryRequest): | |
| """Process research query with sanitized logging""" | |
| # Log incoming request without exposing sensitive data | |
| query_preview = request.query[:50] + "..." if len(request.query) > 50 else request.query | |
| logger.info(f"Query received: {query_preview}") | |
| start_time = datetime.now() | |
| try: | |
| # Process the query | |
| result = await service.process_query(request.query) | |
| # Log result without sensitive details | |
| processing_time = (datetime.now() - start_time).total_seconds() | |
| logger.info(f"Query processed in {processing_time:.2f}s - Success: {result.success}") | |
| if result.success: | |
| logger.info(f"Response generated: {len(result.response)} characters") | |
| else: | |
| logger.info("Query processing failed") | |
| return result | |
| except Exception as e: | |
| processing_time = (datetime.now() - start_time).total_seconds() | |
| logger.error(f"Query processing error after {processing_time:.2f}s") | |
| return QueryResponse( | |
| success=False, | |
| response="We're experiencing technical difficulties. Please try again in a moment.", | |
| error="System temporarily unavailable" | |
| ) | |
| async def health_check(): | |
| """Health check endpoint""" | |
| return { | |
| "status": "healthy", | |
| "timestamp": datetime.now().isoformat(), | |
| "service_enabled": service.enabled, | |
| "version": "2.0.0" | |
| } | |
| async def debug_tools(): | |
| """Debug endpoint to test tool availability and functionality""" | |
| try: | |
| if not service.enabled or not service.agent: | |
| return { | |
| "success": False, | |
| "error": "AI agent not enabled", | |
| "tools_available": False, | |
| "gemini_configured": bool(config.GEMINI_API_KEY) | |
| } | |
| tools_info = [] | |
| for tool in service.agent.tools: | |
| tools_info.append({ | |
| "name": tool.name, | |
| "description": getattr(tool, 'description', 'No description'), | |
| "enabled": getattr(tool, 'enabled', True) | |
| }) | |
| # Test a simple API call | |
| test_result = None | |
| try: | |
| test_result = await service.process_query("What is the current Bitcoin price?") | |
| except Exception as e: | |
| test_result = {"error": str(e)} | |
| return { | |
| "success": True, | |
| "tools_count": len(service.agent.tools), | |
| "tools_info": tools_info, | |
| "test_query_result": { | |
| "success": test_result.success if hasattr(test_result, 'success') else False, | |
| "response_length": len(test_result.response) if hasattr(test_result, 'response') else 0, | |
| "sources": test_result.sources if hasattr(test_result, 'sources') else [], | |
| "error": test_result.error if hasattr(test_result, 'error') else None | |
| }, | |
| "gemini_configured": bool(config.GEMINI_API_KEY), | |
| "timestamp": datetime.now().isoformat() | |
| } | |
| except Exception as e: | |
| logger.error(f"Debug tools error: {e}") | |
| return { | |
| "success": False, | |
| "error": str(e), | |
| "timestamp": datetime.now().isoformat() | |
| } | |
| if __name__ == "__main__": | |
| import uvicorn | |
| logger.info("Starting Web3 Research Co-Pilot...") | |
| uvicorn.run(app, host="0.0.0.0", port=7860, log_level="info") | |