-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
107 lines (90 loc) · 3.96 KB
/
index.html
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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>RAGE Configurable Chunk Size</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Retrieval-Augmented-Generative-Engine Configurable Chunk Size Demo</h1>
<div class="container">
<h2>Data Ingestion</h2>
<form id="ingestForm">
<label for="chunkSizeInput">Chunk Size (words):</label>
<input type="number" id="chunkSizeInput" name="chunkSize" value="128" min="1" style="width: 120px;">
<label for="folderInput">Local Folder Path:</label>
<input type="text" id="folderInput" name="folderpath" placeholder="e.g. ./docs"/>
<label for="urlInput">Remote URL:</label>
<input type="text" id="urlInput" name="urlpath" placeholder="https://example.com/text.pdf"/>
<label for="filetext">Paste File/Text Content:</label>
<textarea id="filetext" rows="4" placeholder="Copy/Paste text..."></textarea>
<button type="submit">INGEST</button>
</form>
<div id="ingestResponse" class="response"></div>
<hr/>
<h2>Query Inference</h2>
<form id="queryForm">
<label for="queryInput">Enter your query:</label>
<input type="text" id="queryInput" placeholder="What are the 2024 sales targets?"/>
<label for="backendSelect">LLM Backend:</label>
<select id="backendSelect">
<option value="local">Local</option>
<option value="openai">OpenAI</option>
<option value="together">Together.ai</option>
<option value="ollama">Ollama</option>
</select>
<button type="submit">QUERY</button>
</form>
<div id="inferenceResponse" class="response"></div>
</div>
<script>
const ingestForm = document.getElementById('ingestForm');
const ingestResp = document.getElementById('ingestResponse');
ingestForm.addEventListener('submit', async (e) => {
e.preventDefault();
const chunkSize = document.getElementById('chunkSizeInput').value.trim();
const folderpath = document.getElementById('folderInput').value.trim();
const urlpath = document.getElementById('urlInput').value.trim();
const filetext = document.getElementById('filetext').value.trim();
ingestResp.innerHTML = "<p><em>Ingesting...</em></p>";
try {
const res = await fetch('/ingest', {
method: 'POST',
headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
body: `chunkSize=${encodeURIComponent(chunkSize)}&folderpath=${encodeURIComponent(folderpath)}&urlpath=${encodeURIComponent(urlpath)}&filetext=${encodeURIComponent(filetext)}`
});
const data = await res.json();
ingestResp.innerHTML = `<pre>${JSON.stringify(data, null, 2)}</pre>`;
} catch (err) {
ingestResp.innerHTML = `<p style="color:red;">Error: ${err.message}</p>`;
}
});
// Query form logic
const queryForm = document.getElementById('queryForm');
const inferenceResponse = document.getElementById('inferenceResponse');
queryForm.addEventListener('submit', async (e) => {
e.preventDefault();
const queryInput = document.getElementById('queryInput').value.trim();
if (!queryInput) return;
const backend = document.getElementById('backendSelect').value;
inferenceResponse.innerHTML = "<p><em>Generating...</em></p>";
try {
const res = await fetch('/inference', {
method: 'POST',
headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
body: `query=${encodeURIComponent(queryInput)}&backend=${encodeURIComponent(backend)}`
});
const data = await res.json();
inferenceResponse.innerHTML = `
<h3>Retrieved Context:</h3>
<pre>${data.retrieved_context || 'No context'}</pre>
<h3>Final Response (${backend}):</h3>
<pre>${data.final_response}</pre>
`;
} catch (err) {
inferenceResponse.innerHTML = `<p style="color:red;">Error: ${err.message}</p>`;
}
});
</script>
</body>
</html>