File size: 7,086 Bytes
c02fe07
 
 
 
 
 
5c00819
 
 
 
 
 
 
 
 
 
da16287
 
c02fe07
 
5c00819
 
 
c02fe07
 
5c00819
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
c02fe07
5c00819
 
 
 
 
 
6bf47a1
 
5c00819
 
 
c02fe07
5c00819
c02fe07
5c00819
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
c02fe07
 
5c00819
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
c02fe07
5c00819
c02fe07
 
da16287
c02fe07
 
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
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
<!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>
    <!-- Prevent flash of unstyled content -->
    <script>(function(){var t=localStorage.getItem('theme')||'dark';document.documentElement.setAttribute('data-theme',t);})()</script>
    <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=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
    <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%236366f1%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@9/marked.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/github-dark.min.css" id="hljs-theme">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" rel="stylesheet">
    {% set root_path = request.scope.get('root_path', '').rstrip('/') %}
    <link rel="stylesheet" href="{{ root_path }}/static/styles.css">
</head>
<body>
    <!-- Toast notification -->
    <div id="statusIndicator" class="toast">
        <i class="fas fa-circle-info toast-icon"></i>
        <span id="statusText">Ready</span>
    </div>

    <div class="app">
        <!-- Header -->
        <header class="header">
            <div class="header-left">
                <svg class="logo-icon" width="26" height="26" viewBox="0 0 24 24" fill="none">
                    <path d="M12 2L2 7v10c0 5.5 3.8 7.7 9 9 5.2-1.3 9-3.5 9-9V7L12 2z" fill="url(#logoGrad)"/>
                    <defs>
                        <linearGradient id="logoGrad" x1="0%" y1="0%" x2="100%" y2="100%">
                            <stop offset="0%" style="stop-color:#6366f1"/>
                            <stop offset="100%" style="stop-color:#22d3ee"/>
                        </linearGradient>
                    </defs>
                </svg>
                <span class="header-title"><span class="brand">Web3</span> Research Co-Pilot</span>
            </div>
            <div class="header-right">
                <div id="statusBadge" class="status-badge checking">
                    <span class="status-dot"></span>
                    <span id="statusBadgeText">Connecting</span>
                </div>
                <div class="model-select">
                    <button class="model-btn active" id="btnOllama" onclick="setModel('ollama')">
                        <i class="fas fa-microchip"></i> Local
                    </button>
                    <button class="model-btn" id="btnGemini" onclick="setModel('gemini')">
                        <i class="fas fa-cloud"></i> Gemini
                    </button>
                </div>
                <button id="themeToggle" class="icon-btn" title="Toggle theme">
                    <i class="fas fa-sun"></i>
                </button>
            </div>
        </header>

        <!-- Main -->
        <main class="main">
            <div class="chat-wrap">
                <div id="chatMessages" class="chat-messages">
                    <div class="welcome-screen">
                        <svg class="welcome-icon" width="52" height="52" viewBox="0 0 24 24" fill="none">
                            <path d="M12 2L2 7v10c0 5.5 3.8 7.7 9 9 5.2-1.3 9-3.5 9-9V7L12 2z" fill="url(#welcomeGrad)"/>
                            <defs>
                                <linearGradient id="welcomeGrad" x1="0%" y1="0%" x2="100%" y2="100%">
                                    <stop offset="0%" style="stop-color:#6366f1"/>
                                    <stop offset="100%" style="stop-color:#22d3ee"/>
                                </linearGradient>
                            </defs>
                        </svg>
                        <h2>Web3 Research Co-Pilot</h2>
                        <p>Professional cryptocurrency analysis and market intelligence</p>
                        <div class="example-chips">
                            <button class="chip" onclick="setQuery('Analyze Bitcoin price trends and institutional adoption patterns')">
                                <i class="fas fa-chart-line"></i> BTC Analysis
                            </button>
                            <button class="chip" onclick="setQuery('Compare top DeFi protocols by TVL, yield, and risk metrics across chains')">
                                <i class="fas fa-coins"></i> DeFi Compare
                            </button>
                            <button class="chip" onclick="setQuery('Evaluate Ethereum Layer 2 scaling solutions and adoption metrics')">
                                <i class="fas fa-layer-group"></i> L2 Research
                            </button>
                            <button class="chip" onclick="setQuery('Find optimal yield farming strategies with risk assessment')">
                                <i class="fas fa-seedling"></i> Yield Farming
                            </button>
                            <button class="chip" onclick="setQuery('Track whale movements and large Bitcoin transactions today')">
                                <i class="fas fa-fish"></i> Whale Tracker
                            </button>
                            <button class="chip" onclick="setQuery('Analyze gas fees and network congestion across blockchains')">
                                <i class="fas fa-gauge-high"></i> Gas Analytics
                            </button>
                        </div>
                    </div>
                </div>

                <!-- Input -->
                <div class="input-area">
                    <div class="input-box">
                        <textarea
                            id="queryInput"
                            class="input-field"
                            placeholder="Ask about crypto markets, DeFi protocols, blockchain analytics..."
                            maxlength="1000"
                            rows="1"
                        ></textarea>
                        <div class="input-actions">
                            <span class="char-count" id="charCount">0 / 1000</span>
                            <button id="sendBtn" class="send-btn" title="Send (Enter)">
                                <i class="fas fa-paper-plane"></i>
                            </button>
                        </div>
                    </div>
                    <p class="input-hint"><kbd>Enter</kbd> to send &nbsp;·&nbsp; <kbd>Shift+Enter</kbd> for new line</p>
                </div>
            </div>
        </main>
    </div>

    <script src="{{ root_path }}/static/app.js"></script>
</body>
</html>