This repository has been archived by the owner on Nov 12, 2023. It is now read-only.
generated from TBD54566975/tbd-project-template
-
Notifications
You must be signed in to change notification settings - Fork 2
/
index.js
213 lines (182 loc) · 7.01 KB
/
index.js
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
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
const express = require('express');
const app = express();
const port = 3000;
const fs = require('fs');
if (!String(process.env.OPENAI_API_KEY).startsWith('sk-')) {
throw new Error("Invalid OpenAI API key, please check 'https://platform.openai.com/account/api-keys'");
}
app.use(express.json());
const appjs = fs.readFileSync('seed_app.html', 'utf8');
app.get('/', (_, res) => {
res.send(fs.readFileSync('index.html', 'utf8'));
});
app.get('/component-builder', (_, res) => {
res.send(fs.readFileSync('component-builder.html', 'utf8'));
});
app.get('/app', (_, res) => {
res.send(appjs);
});
app.post('/prompt', async (req, res) => {
// read the body of the request - which is json
body = req.body;
const result = await processOpenai(body.prompt, body.context_html);
res.send(result);
});
app.post('/generate-webcomponent', async (req, res) => {
const result = await generateWebElement(req.body.schema);
return res.send(result);
});
app.post('/identify-best-fit-schema', async (req, res) => {
const result = await identifyBestFitSchema(req.body.schema_description);
return res.send(result);
});
app.listen(port, async () => {
console.log(`web5 maker app listening on port ${port}`);
});
app.use(function (err, req, res, next) {
console.log(err);
res.status(500).send('Something broke!');
});
process.on('unhandledRejection', (reason, promise) => {
console.error(`Unhandled promise rejection. Reason: ${reason}. Promise: ${JSON.stringify(promise)}`);
});
process.on('uncaughtException', err => {
console.error('Uncaught exception:', err.stack || err);
});
async function processOpenai(prompt, context_html) {
console.log('processing prompt: ' + prompt);
const { Configuration, OpenAIApi } = require('openai');
const configuration = new Configuration({
apiKey: process.env.OPENAI_API_KEY,
});
let chat_messages = [
{ role: 'system', content: 'You are a helpful assistant that modifies the html and web5 source code as directed.' },
];
if (context_html == appjs) {
// append to chat_messages as it is brand new
chat_messages = chat_messages.concat([
{
role: 'user',
content:
"Following is a sample of a web5 application in a single html file. It doesn't really do much yet, but shows a load and save code sample. You can use this as a basis to build a simple single page html application as directed (and you don't need to include the sample load and save). Please return only the source code.\n Web5 app:\n" +
context_html +
'\n' +
prompt,
},
]);
} else {
chat_messages = chat_messages.concat([
{
role: 'user',
content:
'Following is a work in progress web5 application in a single html file. Modify this as directed. Please return only the source code.\n Web5 app:\n' +
context_html +
'\n' +
prompt,
},
]);
}
chat_messages = chat_messages.concat([]);
const openai = new OpenAIApi(configuration);
const completion = await openai.createChatCompletion({
model: 'gpt-3.5-turbo',
messages: chat_messages,
});
console.log(completion.data.choices[0].message);
const result = completion.data.choices[0].message['content'];
// get only the content that starts with <!DOCTYPE html> and ends with </html>
const start = result.indexOf('<!DOCTYPE html>');
const end = result.indexOf('</html>');
const html = result.substring(start, end + '</html>'.length);
return html;
}
async function identifyBestFitSchema(prompt) {
const { Configuration, OpenAIApi } = require('openai');
const configuration = new Configuration({
apiKey: process.env.OPENAI_API_KEY,
});
let chat_messages = [
{
role: 'system',
content:
'You are a helpful assistant that will match try to match the data or description to a schema from schema.org.',
},
{
role: 'user',
content:
'schema.org defines many json schemas. Try to match the following description to a schema from schema.org that fits, and return only the schema URL.',
},
{ role: 'assistant', content: 'ok. understood. Can you provide an examples?' },
{ role: 'user', content: 'Description: ' + ' I want to track a healh insurance plan' },
{ role: 'assistant', content: 'https://schema.org/HealthInsurancePlan' },
{ role: 'user', content: 'Description: ' + prompt },
];
const openai = new OpenAIApi(configuration);
const completion = await openai.createChatCompletion({
model: 'gpt-3.5-turbo',
messages: chat_messages,
});
console.log(completion.data.choices[0].message);
const result = completion.data.choices[0].message['content'];
return result;
}
async function generateWebElement(schema) {
const { Configuration, OpenAIApi } = require('openai');
const configuration = new Configuration({
apiKey: process.env.OPENAI_API_KEY,
});
let chat_messages = [
{ role: 'system', content: 'You are a helpful assistant that build a web component for the given JSON schema.' },
{
role: 'user',
content:
"Based on https://html.spec.whatwg.org/multipage/custom-elements.html#custom-elements, write a web component that renders json that complies with a specified schema. Please only return just the code, including how to register and use it. Doesn't need to be a whole HTML page with it (and no styles are needed). Some schemas can be long, so it may be necessary to only show rendering a subset of the fields for brevity and speed.",
},
{
role: 'assistant',
content:
'ok. understood. If needed I will only show a subset of fields to not be too slow (and only show the code, no comments). Can you show me an example?',
},
{ role: 'user', content: 'JSON schema: https://schema.org/Person' },
{
role: 'assistant',
content: `
class PersonComponent extends HTMLElement {
constructor() {
super();
this.attachShadow({ mode: 'open' });
}
connectedCallback() {
this.render();
}
render() {
const personData = JSON.parse(this.getAttribute('data'));
const name = personData.givenName || '';
const email = personData.email || '';
const telephone = personData.telephone || '';
this.shadowRoot.innerHTML = \`
<div>
<h2>Given Name: \${givenName}</h2>
<p>Email: \${email}</p>
<p>Telephone: \${telephone}</p>
</div>
\`;
}
}
customElements.define('person-component', PersonComponent);
`,
},
{ role: 'user', content: 'JSON schema: ' + schema },
];
const openai = new OpenAIApi(configuration);
const completion = await openai.createChatCompletion({
model: 'gpt-3.5-turbo',
messages: chat_messages,
});
console.log(completion.data.choices[0].message);
const result = completion.data.choices[0].message['content'];
// strip any markdown nonsense
return result.replace(/`/g, '');
}
//generateDataForSchema("https://schema.org/HealthInsurancePlan");
//generateWebElement("I'm building an app for car models");