deep-research/run.html at main · web3group/deep-research · GitHub

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
127
128
129
130
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>Deep Research Tool</title>
<style>
  :root { --spacing:1rem; --radius:8px; --shadow:0 2px 6px rgba(0,0,0,0.1); }
  * { box-sizing:border-box; }
  body { font-family:sans-serif; background:#f7f7f7; margin:0; padding:var(--spacing); display:flex; justify-content:center; }
  .container { max-width:600px; width:100%; }
  .card { background:#fff; padding:var(--spacing); border-radius:var(--radius); box-shadow:var(--shadow); margin-bottom:var(--spacing); position:relative; }
  label { display:block; margin-bottom:var(--spacing); }
  input, textarea { width:100%; padding:.5rem; border:1px solid #ccc; border-radius:var(--radius); }
  .radio-group { display:flex; gap:var(--spacing); margin-bottom:var(--spacing); }
  button { padding:.75rem 1.5rem; border:none; border-radius:var(--radius); cursor:pointer; box-shadow:var(--shadow); }
  pre { background:#f0f0f0; padding:var(--spacing); border-radius:var(--radius); white-space:pre-wrap; }
  .loader { display:none; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); background:rgba(255,255,255,0.9); padding:1rem 2rem; border-radius:var(--radius); box-shadow:var(--shadow); font-weight:bold; }
</style>
</head>
<body>
<div class="container">

  <div id="step1" class="card">
    <h1>Deep Research Tool</h1>
    <label>Customer Domain:<input id="customerDomain" placeholder="eg: Fintech"/></label>
    <label>Product:<input id="product" placeholder="eg: Expense Management Software"/></label>
    <label>Persona 1:<input id="persona1" placeholder="eg: CFO"/></label>
    <label>Persona 2:<input id="persona2" placeholder="eg: Head of Procurement"/></label>
    <label>Persona 3:<input id="persona3" placeholder="eg: Finance Manager"/></label>
    <label>Target Company Domain:<input id="targetDomain" placeholder="eg: Healthcare"/></label>
    <label>Breadth:<input type="number" id="breadth" value="3" min="1"/></label>
    <label>Depth:<input type="number" id="depth" value="3" min="1"/></label>
    <div class="radio-group">
      <label><input type="radio" name="mode" value="report" checked/> Report</label>
    </div>
    <button id="step1Btn" onclick="generateQuestions()">Next →</button>
    <div id="loader1" class="loader">Generating questions…</div>
  </div>

  <div id="step2" class="card" style="display:none;">
    <h2>Follow‑Up Questions</h2>
    <form id="questionsForm"></form>
    <button id="step2Btn" onclick="runResearch()">Start Research</button>
    <div id="loader2" class="loader">Running research… <br> It may take up to 3-5 min</div>
  </div>

  <div id="output" class="card" style="display:none;">
    <h2>Result</h2>
    <pre id="result"></pre>
    <h3>Learnings</h3><pre id="learnings"></pre>
    <h3>Sources</h3><pre id="urls"></pre>
  </div>

</div>

<script>
const API_BASE = 'https://e28b-154-17-231-154.ngrok-free.app';

function buildQuery() {
  const cd = document.getElementById('customerDomain').value.trim();
  const prod = document.getElementById('product').value.trim();
  const personas = [ 'persona1','persona2','persona3' ]
    .map(id => document.getElementById(id).value.trim())
    .filter(Boolean)
    .join(', ');
  const td = document.getElementById('targetDomain').value.trim();
  return `We are ${cd}. We sell ${prod} to ${personas}. The companies we target are ${td}. Tell me their painpoints and how we can sell into them.`;
}

async function generateQuestions() {
  const query = buildQuery();
  if (!query) return alert('Fill out all fields');

  document.getElementById('loader1').style.display='block';
  document.getElementById('step1Btn').disabled=true;

  const res = await fetch(`${API_BASE}/api/feedback`, {
    method:'POST', headers:{'Content-Type':'application/json'}, body: JSON.stringify({ query })
  });
  const { questions, error } = await res.json();
  document.getElementById('loader1').style.display='none';
  document.getElementById('step1Btn').disabled=false;
  if (error) return alert(error);

  document.getElementById('questionsForm').innerHTML =
    questions.map(q=>`<label><span>${q}</span><textarea placeholder="Answer…"></textarea></label>`).join('');
  document.getElementById('step1').style.display='none';
  document.getElementById('step2').style.display='block';
}

async function runResearch() {
  const combinedQuery = buildQuery() + '\n\nFollow‑up:\n' +
    Array.from(document.querySelectorAll('#questionsForm textarea'))
      .map(ta=>`Q: ${ta.previousElementSibling.textContent.trim()}\nA: ${ta.value.trim()}`)
      .join('\n');

  document.getElementById('loader2').style.display='block';
  document.getElementById('step2Btn').disabled=true;

  const breadth = +document.getElementById('breadth').value;
  const depth = +document.getElementById('depth').value;
  const type = document.querySelector('input[name="mode"]:checked').value;

  const res = await fetch(`${API_BASE}/api/research`, {
    method:'POST', headers:{'Content-Type':'application/json'},
    body: JSON.stringify({ query: combinedQuery, breadth, depth, type })
  });
  const { output, learnings, visitedUrls, error } = await res.json();

  document.getElementById('loader2').style.display='none';
  document.getElementById('step2Btn').disabled=false;
  if (error) return alert(error);

  document.getElementById('result').textContent=output;
  document.getElementById('learnings').textContent=learnings.join('\n');
  document.getElementById('urls').textContent=visitedUrls.join('\n');
  document.getElementById('step2').style.display='none';
  document.getElementById('output').style.display='block';
}

// Warn user before reloading / navigating away
window.addEventListener('beforeunload', (event) => {
  event.preventDefault();
  event.returnValue = 'Your research progress will be lost if you leave or reload this page.';
});

</script>
</body>
</html>