openclaw

Running

Simford.Dong Claude commited on Feb 1

Commit

4ee7a5e

1 Parent(s): a809d45

Add web UI dashboard for market research

Features:
- Interactive dashboard with Chart.js visualizations
- Input form for keyword research
- Real-time market forecast charts
- Regional distribution pie chart
- Competitive landscape table
- Key insights display (opportunities, challenges, drivers)
- Responsive design with gradient theme

- Add static file serving to server.js
- Update Dockerfile to copy public/ directory

Access at: https://sim4imgbed-openclaw.hf.space/

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

Files changed (3) hide show

Dockerfile +3 -0
public/index.html +648 -0
server.js +8 -0

Dockerfile CHANGED Viewed

@@ -10,5 +10,8 @@ RUN npm install
 COPY src/ ./src/
 COPY server.js .
 EXPOSE 7860
 CMD ["node", "server.js"]

 COPY src/ ./src/
 COPY server.js .
+# copy web UI
+COPY public/ ./public/
 EXPOSE 7860
 CMD ["node", "server.js"]

public/index.html ADDED Viewed

	@@ -0,0 +1,648 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>OpenClaw Market Research Agent</title>
+  <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.1/dist/chart.umd.min.js"></script>
+  <style>
+    * {
+      margin: 0;
+      padding: 0;
+      box-sizing: border-box;
+    }
+    body {
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
+      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+      min-height: 100vh;
+      padding: 20px;
+    }
+    .container {
+      max-width: 1200px;
+      margin: 0 auto;
+    }
+    .header {
+      text-align: center;
+      color: white;
+      margin-bottom: 30px;
+    }
+    .header h1 {
+      font-size: 2.5rem;
+      margin-bottom: 10px;
+    }
+    .header p {
+      font-size: 1.1rem;
+      opacity: 0.9;
+    }
+    .card {
+      background: white;
+      border-radius: 16px;
+      padding: 24px;
+      margin-bottom: 20px;
+      box-shadow: 0 10px 40px rgba(0,0,0,0.1);
+    }
+    .input-section {
+      display: flex;
+      gap: 12px;
+      align-items: center;
+      flex-wrap: wrap;
+    }
+    .input-group {
+      flex: 1;
+      min-width: 200px;
+    }
+    .input-group label {
+      display: block;
+      font-size: 0.9rem;
+      color: #666;
+      margin-bottom: 6px;
+    }
+    .input-group input,
+    .input-group select {
+      width: 100%;
+      padding: 12px 16px;
+      border: 2px solid #e0e0e0;
+      border-radius: 10px;
+      font-size: 1rem;
+      transition: border-color 0.2s;
+    }
+    .input-group input:focus,
+    .input-group select:focus {
+      outline: none;
+      border-color: #667eea;
+    }
+    .btn {
+      padding: 12px 24px;
+      border: none;
+      border-radius: 10px;
+      font-size: 1rem;
+      font-weight: 600;
+      cursor: pointer;
+      transition: all 0.2s;
+    }
+    .btn-primary {
+      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+      color: white;
+    }
+    .btn-primary:hover {
+      transform: translateY(-2px);
+      box-shadow: 0 5px 20px rgba(102, 126, 234, 0.4);
+    }
+    .btn-primary:disabled {
+      opacity: 0.6;
+      cursor: not-allowed;
+      transform: none;
+    }
+    .loading {
+      display: none;
+      text-align: center;
+      padding: 40px;
+    }
+    .loading.active {
+      display: block;
+    }
+    .spinner {
+      width: 50px;
+      height: 50px;
+      border: 4px solid #f3f3f3;
+      border-top: 4px solid #667eea;
+      border-radius: 50%;
+      animation: spin 1s linear infinite;
+      margin: 0 auto 20px;
+    }
+    @keyframes spin {
+      0% { transform: rotate(0deg); }
+      100% { transform: rotate(360deg); }
+    }
+    .results {
+      display: none;
+    }
+    .results.active {
+      display: block;
+    }
+    .results-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-bottom: 20px;
+      padding-bottom: 20px;
+      border-bottom: 1px solid #e0e0e0;
+    }
+    .results-title {
+      font-size: 1.5rem;
+      color: #333;
+    }
+    .meta-info {
+      display: flex;
+      gap: 20px;
+      font-size: 0.9rem;
+      color: #666;
+    }
+    .meta-item {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+    }
+    .meta-badge {
+      background: #e8f5e9;
+      color: #2e7d32;
+      padding: 4px 12px;
+      border-radius: 20px;
+      font-size: 0.85rem;
+      font-weight: 600;
+    }
+    .summary-grid {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+      gap: 16px;
+      margin-bottom: 24px;
+    }
+    .summary-card {
+      background: linear-gradient(135deg, #f5f7fa 0%, #e4e8eb 100%);
+      border-radius: 12px;
+      padding: 20px;
+      text-align: center;
+    }
+    .summary-label {
+      font-size: 0.85rem;
+      color: #666;
+      margin-bottom: 8px;
+    }
+    .summary-value {
+      font-size: 1.8rem;
+      font-weight: 700;
+      color: #333;
+    }
+    .summary-value.highlight {
+      color: #667eea;
+    }
+    .chart-section {
+      margin-bottom: 24px;
+    }
+    .chart-title {
+      font-size: 1.1rem;
+      color: #333;
+      margin-bottom: 16px;
+    }
+    .chart-container {
+      height: 300px;
+      position: relative;
+    }
+    .data-table {
+      width: 100%;
+      border-collapse: collapse;
+      margin-top: 16px;
+    }
+    .data-table th,
+    .data-table td {
+      padding: 12px;
+      text-align: left;
+      border-bottom: 1px solid #e0e0e0;
+    }
+    .data-table th {
+      background: #f5f5f5;
+      font-weight: 600;
+      color: #333;
+    }
+    .data-table tr:hover {
+      background: #f9f9f9;
+    }
+    .section-title {
+      font-size: 1.2rem;
+      color: #333;
+      margin-bottom: 16px;
+      display: flex;
+      align-items: center;
+      gap: 10px;
+    }
+    .section-title::before {
+      content: '';
+      width: 4px;
+      height: 24px;
+      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+      border-radius: 2px;
+    }
+    .insights-grid {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+      gap: 16px;
+    }
+    .insight-card {
+      background: #f9f9f9;
+      border-radius: 12px;
+      padding: 16px;
+    }
+    .insight-card h4 {
+      color: #333;
+      margin-bottom: 12px;
+      font-size: 1rem;
+    }
+    .insight-list {
+      list-style: none;
+    }
+    .insight-list li {
+      padding: 6px 0;
+      color: #666;
+      font-size: 0.95rem;
+    }
+    .insight-list li::before {
+      content: '•';
+      color: #667eea;
+      font-weight: bold;
+      margin-right: 8px;
+    }
+    .error {
+      display: none;
+      background: #ffebee;
+      color: #c62828;
+      padding: 16px;
+      border-radius: 10px;
+      margin-top: 20px;
+    }
+    .error.active {
+      display: block;
+    }
+    @media (max-width: 768px) {
+      .header h1 {
+        font-size: 1.8rem;
+      }
+      .input-section {
+        flex-direction: column;
+      }
+      .input-group {
+        width: 100%;
+      }
+      .btn {
+        width: 100%;
+      }
+    }
+  </style>
+</head>
+<body>
+  <div class="container">
+    <div class="header">
+      <h1>OpenClaw Market Research</h1>
+      <p>AI-powered market analysis and forecasting</p>
+    </div>
+    <div class="card">
+      <div class="input-section">
+        <div class="input-group">
+          <label for="keyword">Market Keyword</label>
+          <input type="text" id="keyword" placeholder="e.g., AI Healthcare, Electric Vehicles, Cloud Computing" value="AI Healthcare">
+        </div>
+        <div class="input-group">
+          <label for="provider">AI Provider</label>
+          <select id="provider">
+            <option value="auto">Auto Select</option>
+            <option value="gemini">Gemini</option>
+            <option value="openai">OpenAI</option>
+            <option value="claude">Claude</option>
+            <option value="deepseek">DeepSeek</option>
+            <option value="openrouter">OpenRouter</option>
+          </select>
+        </div>
+        <button class="btn btn-primary" id="searchBtn" onclick="runResearch()">
+          Generate Report
+        </button>
+      </div>
+    </div>
+    <div class="loading" id="loading">
+      <div class="spinner"></div>
+      <p>Analyzing market data and generating forecast...</p>
+    </div>
+    <div class="error" id="error"></div>
+    <div class="results" id="results">
+      <div class="card">
+        <div class="results-header">
+          <h2 class="results-title" id="marketTitle">Market Research Report</h2>
+          <div class="meta-info">
+            <span class="meta-badge" id="providerBadge">Gemini</span>
+            <span class="meta-item" id="timestamp"></span>
+          </div>
+        </div>
+        <div class="summary-grid">
+          <div class="summary-card">
+            <div class="summary-label">2023 Market Size</div>
+            <div class="summary-value" id="past2023">$0B</div>
+          </div>
+          <div class="summary-card">
+            <div class="summary-label">2025 Market Size</div>
+            <div class="summary-value highlight" id="current2025">$0B</div>
+          </div>
+          <div class="summary-card">
+            <div class="summary-label">2033 Forecast</div>
+            <div class="summary-value" id="forecast2033">$0B</div>
+          </div>
+          <div class="summary-card">
+            <div class="summary-label">CAGR</div>
+            <div class="summary-value highlight" id="cagr">0%</div>
+          </div>
+        </div>
+        <div class="chart-section">
+          <h3 class="chart-title">Market Forecast (2023-2033)</h3>
+          <div class="chart-container">
+            <canvas id="forecastChart"></canvas>
+          </div>
+        </div>
+        <div class="chart-section">
+          <h3 class="chart-title">Regional Market Distribution</h3>
+          <div class="chart-container">
+            <canvas id="regionalChart"></canvas>
+          </div>
+        </div>
+        <h3 class="section-title">Regional Analysis</h3>
+        <table class="data-table" id="regionalTable">
+          <thead>
+            <tr>
+              <th>Region</th>
+              <th>Market Share</th>
+              <th>CAGR</th>
+            </tr>
+          </thead>
+          <tbody id="regionalBody"></tbody>
+        </table>
+        <h3 class="section-title" style="margin-top: 24px;">Competitive Landscape</h3>
+        <table class="data-table">
+          <thead>
+            <tr>
+              <th>Company</th>
+              <th>Market Share</th>
+            </tr>
+          </thead>
+          <tbody id="competitiveBody"></tbody>
+        </table>
+        <h3 class="section-title" style="margin-top: 24px;">Key Insights</h3>
+        <div class="insights-grid">
+          <div class="insight-card">
+            <h4>Opportunities</h4>
+            <ul class="insight-list" id="opportunitiesList"></ul>
+          </div>
+          <div class="insight-card">
+            <h4>Challenges</h4>
+            <ul class="insight-list" id="challengesList"></ul>
+          </div>
+          <div class="insight-card">
+            <h4>Market Drivers</h4>
+            <ul class="insight-list" id="driversList"></ul>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <script>
+    let forecastChart = null;
+    let regionalChart = null;
+    async function runResearch() {
+      const keyword = document.getElementById('keyword').value.trim();
+      const provider = document.getElementById('provider').value;
+      if (!keyword) {
+        showError('Please enter a market keyword');
+        return;
+      }
+      const loading = document.getElementById('loading');
+      const results = document.getElementById('results');
+      const error = document.getElementById('error');
+      const btn = document.getElementById('searchBtn');
+      loading.classList.add('active');
+      results.classList.remove('active');
+      error.classList.remove('active');
+      btn.disabled = true;
+      try {
+        const response = await fetch('/run', {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/json'
+          },
+          body: JSON.stringify({
+            task: 'market_research',
+            provider: provider === 'auto' ? undefined : provider,
+            keyword: keyword
+          })
+        });
+        const data = await response.json();
+        if (!response.ok || data.error) {
+          throw new Error(data.error || data.details || 'Request failed');
+        }
+        displayResults(data);
+        results.classList.add('active');
+      } catch (err) {
+        showError(err.message);
+      } finally {
+        loading.classList.remove('active');
+        btn.disabled = false;
+      }
+    }
+    function displayResults(data) {
+      const dashboard = data.dashboard_view;
+      // Header
+      document.getElementById('marketTitle').textContent = dashboard.marketTitle;
+      document.getElementById('providerBadge').textContent = data.meta.provider_used || 'Auto';
+      document.getElementById('timestamp').textContent = new Date(data.meta.timestamp).toLocaleString();
+      // Summary
+      document.getElementById('past2023').textContent = `$${dashboard.marketSummary.past2023}B`;
+      document.getElementById('current2025').textContent = `$${dashboard.marketSummary.current2025}B`;
+      document.getElementById('forecast2033').textContent = `$${dashboard.marketSummary.forecast2033}B`;
+      document.getElementById('cagr').textContent = `${dashboard.marketSummary.cagr}%`;
+      // Forecast Chart
+      updateForecastChart(dashboard.forecast);
+      // Regional Chart
+      updateRegionalChart(dashboard.regional);
+      // Regional Table
+      const regionalBody = document.getElementById('regionalBody');
+      regionalBody.innerHTML = dashboard.regional.map(r => `
+        <tr>
+          <td>${r.region}</td>
+          <td>${r.share}%</td>
+          <td>${r.cagr}%</td>
+        </tr>
+      `).join('');
+      // Competitive Table
+      const competitiveBody = document.getElementById('competitiveBody');
+      competitiveBody.innerHTML = dashboard.competitive.map(c => `
+        <tr>
+          <td>${c.company}</td>
+          <td>${c.share}%</td>
+        </tr>
+      `).join('');
+      // Insights
+      document.getElementById('opportunitiesList').innerHTML = dashboard.insights.keyOpportunities.map(o => `<li>${o}</li>`).join('');
+      document.getElementById('challengesList').innerHTML = dashboard.insights.majorChallenges.map(c => `<li>${c}</li>`).join('');
+      document.getElementById('driversList').innerHTML = dashboard.drivers.map(d => `<li>${d.driver} (Impact: ${d.impact})</li>`).join('');
+    }
+    function updateForecastChart(forecast) {
+      const ctx = document.getElementById('forecastChart').getContext('2d');
+      if (forecastChart) {
+        forecastChart.destroy();
+      }
+      forecastChart = new Chart(ctx, {
+        type: 'line',
+        data: {
+          labels: forecast.map(f => f.year),
+          datasets: [{
+            label: 'Market Size (Billion USD)',
+            data: forecast.map(f => f.value),
+            borderColor: '#667eea',
+            backgroundColor: 'rgba(102, 126, 234, 0.1)',
+            fill: true,
+            tension: 0.4,
+            pointBackgroundColor: '#667eea',
+            pointBorderColor: '#fff',
+            pointBorderWidth: 2,
+            pointRadius: 6
+          }]
+        },
+        options: {
+          responsive: true,
+          maintainAspectRatio: false,
+          plugins: {
+            legend: {
+              display: false
+            }
+          },
+          scales: {
+            y: {
+              beginAtZero: true,
+              grid: {
+                color: 'rgba(0,0,0,0.05)'
+              }
+            },
+            x: {
+              grid: {
+                display: false
+              }
+            }
+          }
+        }
+      });
+    }
+    function updateRegionalChart(regional) {
+      const ctx = document.getElementById('regionalChart').getContext('2d');
+      if (regionalChart) {
+        regionalChart.destroy();
+      }
+      regionalChart = new Chart(ctx, {
+        type: 'doughnut',
+        data: {
+          labels: regional.map(r => r.region),
+          datasets: [{
+            data: regional.map(r => r.share),
+            backgroundColor: [
+              '#667eea',
+              '#764ba2',
+              '#f093fb',
+              '#4facfe',
+              '#43e97b'
+            ],
+            borderWidth: 0
+          }]
+        },
+        options: {
+          responsive: true,
+          maintainAspectRatio: false,
+          plugins: {
+            legend: {
+              position: 'right'
+            }
+          }
+        }
+      });
+    }
+    function showError(message) {
+      const error = document.getElementById('error');
+      error.textContent = `Error: ${message}`;
+      error.classList.add('active');
+    }
+    // Run on Enter key
+    document.getElementById('keyword').addEventListener('keypress', (e) => {
+      if (e.key === 'Enter') runResearch();
+    });
+  </script>
+</body>
+</html>

server.js CHANGED Viewed

@@ -1,7 +1,15 @@
 import express from "express";
 import { spawn } from "child_process";
 const app = express();
 app.use(express.json());
 /* ===============================

 import express from "express";
 import { spawn } from "child_process";
+import { fileURLToPath } from "url";
+import { dirname, join } from "path";
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
 const app = express();
+// Serve static files from public directory
+app.use(express.static(join(__dirname, "public")));
 app.use(express.json());
 /* ===============================