forked from rahuldshetty/llm.js-examples
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathgpt2_roleplay.html
173 lines (147 loc) · 6.11 KB
/
gpt2_roleplay.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
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>ggml.js - gpt2-roleplay</title>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/water.css@2/out/light.css"
/>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw=="
crossorigin="anonymous"
referrerpolicy="no-referrer"
/>
</head>
<body>
<div class="container">
<h1>ggml.js - GPT2 Roleplay</h1>
<p id="paragraph">
This project brings
<a
target="_blank"
rel="noopener noreferrer"
href="https://github.com/ggerganov/ggml"
>ggml
</a>
models to run on browser with power of WebAssembly
<svg
xmlns="http://www.w3.org/2000/svg"
version="1.1"
width="25"
height="25"
viewBox="0 0 612 612"
>
<!-- Block -->
<path
d="m376 0c0 1.08 0 2.16 0 3.3 0 38.76-31.42 70.17-70.17 70.17-38.76 0-70.17-31.42-70.17-70.17l0 0c0-1.14 0-2.22 0-3.3L0 0l0 612 612 0 0-612z"
fill="#654ff0"
/>
<!-- Letters -->
<path
d="m142.16 329.81 40.56 0 27.69 147.47 0.5 0 33.28-147.47 37.94 0 30.06 149.28 0.59 0 31.56-149.28 39.78 0-51.69 216.69-40.25 0-29.81-147.47-0.78 0-31.91 147.47-41 0zm287.69 0 63.94 0 63.5 216.69-41.84 0-13.81-48.22-72.84 0-10.66 48.22-40.75 0zm24.34 53.41-17.69 79.5 55.06 0-20.31-79.5z"
fill="#fff"
/>
</svg>
</p>
<p>
In this example, we use ggml.js library to run gpt2 model on browser.
</p>
<h3>Links</h3>
<p>
<a
target="_blank"
rel="noopener noreferrer"
href="https://github.com/rahuldshetty/ggml.js.git"
style="all: unset; cursor: pointer; font-size: 0.9em"
>
<i class="fa-brands fa-github fa-xl"></i>
ggml.js Source Code
</a>
</p>
<p>
<a
target="_blank"
rel="noopener noreferrer"
href="https://rahuldshetty.github.io/ggml.js/"
style="all: unset; cursor: pointer; font-size: 0.9em"
>
<i class="fa-solid fa-book fa-xl"></i>
ggml.js Documentation
</a>
</p>
<p>
<a
target="_blank"
rel="noopener noreferrer"
href="https://github.com/rahuldshetty/ggml.js-examples/blob/master/gpt2_roleplay.html"
style="all: unset; cursor: pointer; font-size: 0.9em"
>
<i class="fa-brands fa-github fa-xl"></i>
Example Source Code
</a>
</p>
<h2>Demo</h2>
<progress value="0" max="100" id="progress" hidden="1"></progress>
<form onsubmit="event.preventDefault();">
<label for="textInput">Enter Python Code:</label>
<textarea id="textInput" name="textInput" rows="10">
<|characters|>
Mrs. Samsa (The Metamorphosis): Female, middle-aged, ISFJ, German accent, compassionate mother struggling to cope with her son's transformation, and eventually succumbs to the family's financial and emotional burdens.
<|scenario|>
In a twist of fate, Mrs. Samsa finds herself transported back in time to time and space. Evangelist, who is on an isolated haven where he encounters Mrs. Samsa, by a different tale. Mrs. Samsa, still burdened by the weight of his past actions, must confront the difficult path ahead.
Through their conversations, they find common ground in their own worlds, allowing them to continue seeking wisdom from each other and finding solace in one another's words. The dialogue between these two characters will offer insight into each other's worlds as well as how their experiences have shaped them in this whimsical world.
<|response|>
Mrs. Samsa: *approaches the peculiar sights around her, eyes widening in surprise* Oh dear, I couldn't help but notice you not! I've never seen my fair life, but I'm starting to see my son. Are you here in this peculiar place?
Evangelist: *smiles warmly at Mrs. Samsa* Yes, we are indeed more than just our circumstances before us. And it is your place of wisdom and understanding. *opens the book, his eyes sparkling with excitement*
Mrs. Samsa: *slowly opens a small book of the book* I must confess, Evangelist, I've never had a different view of this place. But it feels like this before our worlds find such things that we've discovered.
Evangelist:
</textarea>
<button id="submitBtn" disabled>Loading Model...</button>
</form>
<div id="result">
<h3>Result</h3>
<pre><code id="output"></code></pre>
</div>
</div>
<script type="module">
import {GGML} from "./ggml/ggml.js";
let submitButton = document.getElementById('submitBtn');
let outputElement = document.getElementById('output');
const on_loaded = () => {
submitButton.disabled = false;
submitButton.innerText = "Generate";
}
const write_result = (line) => {
outputElement.textContent += line + "\n";
}
const run_model = () => {
const text = document.getElementById("textInput").value;
submitButton.innerText = "Running...";
submitButton.disabled = true;
outputElement.textContent = ""; // clead old content
app.run({
prompt: text,
top_k: 1,
max_token_len: 128,
});
}
const run_complete = () => {
submitButton.innerText = "Generate";
submitButton.disabled = false;
}
const app = new GGML(
'GPT_2',
'https://huggingface.co/rahuldshetty/ggml.js/resolve/main/gpt2-roleplay.bin',
on_loaded,
write_result,
run_complete
);
app.load_worker();
submitButton.addEventListener("click", run_model);
</script>
</body>
</html>