Skip to content

Commit a0d7b38

Browse files
aldergalderg
committed
Minor UX improvements
1 parent 420daaa commit a0d7b38

File tree

1 file changed

+97
-62
lines changed

1 file changed

+97
-62
lines changed

‎tools/generate.html

+97-62
Original file line numberDiff line numberDiff line change
@@ -5,18 +5,26 @@
55
<meta charset="utf-8" />
66
<style type="text/css">
77
body {
8-
color-scheme: dark;
8+
font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans",
9+
Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
910
background: light-dark(rgb(255, 255, 255), rgb(18, 18, 18));
1011
color: light-dark(rgb(18, 18, 18), white);
1112
margin: 10px 5% 10px 5%;
12-
font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
13+
color-scheme: dark;
1314
font-size: 16px;
1415
}
1516
button {
16-
padding: 10px;
1717
background: #1a4cad;
18-
border: none;
1918
border-radius: 4px;
19+
padding: 10px;
20+
border: none;
21+
}
22+
button, a, input, select {
23+
cursor: default;
24+
opacity: 0.9;
25+
}
26+
button:hover:not(:disabled), a:hover, input:hover, select:hover {
27+
opacity: 1;
2028
}
2129
</style>
2230
</head>
@@ -38,7 +46,7 @@
3846
fill="currentColor" />
3947
</svg>
4048
<span style="font-family:Helvetica;font-weight:700;font-size:20px;margin-left:4px;">draw.io</span>
41-
<a style="margin-left:auto;" href="https://github.com/jgraph/drawio-tools/discussions/3" target="_blank">
49+
<a style="margin-left:auto;" href="https://github.com/jgraph/drawio-tools/discussions/3" title="Help" target="_blank">
4250
<img style="opacity:0.6;height:16px;width:16px;filter:invert(1);" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBmaWxsPSJub25lIiBkPSJNMCAwaDI0djI0SDB6Ii8+PHBhdGggZD0iTTExIDE4aDJ2LTJoLTJ2MnptMS0xNkM2LjQ4IDIgMiA2LjQ4IDIgMTJzNC40OCAxMCAxMCAxMCAxMC00LjQ4IDEwLTEwUzE3LjUyIDIgMTIgMnptMCAxOGMtNC40MSAwLTgtMy41OS04LThzMy41OS04IDgtOCA4IDMuNTkgOCA4LTMuNTkgOC04IDh6bTAtMTRjLTIuMjEgMC00IDEuNzktNCA0aDJjMC0xLjEuOS0yIDItMnMyIC45IDIgMmMwIDItMyAxLjc1LTMgNWgyYzAtMi4yNSAzLTIuNSAzLTUgMC0yLjIxLTEuNzktNC00LTR6Ii8+PC9zdmc+" border="0">
4351
</a>
4452
</div>
@@ -48,21 +56,21 @@
4856
placeholder="Diagram description, eg. five tier sequence diagram on how to order fast food online or graph TD; A-->B; A-->C; B-->D; C-->D;"
4957
spellcheck="false" autocomplete="off" autocorrect="off" autocapitalize="off"></textarea>
5058
<div style="position:relative;display:flex;align-items:center;justify-items:stretch;padding-top:10px;">
51-
<button style="position:relative;background:rgb(56, 56, 56);color:gray;" id="create" onclick="replaceEscapes();return false;">
59+
<button style="position:relative;background:rgb(56, 56, 56);color:gray;" title="Unescape" id="create" onclick="replaceEscapes();return false;">
5260
Unescape
5361
</button>
5462
<div style="margin-left:auto;opacity:0.5;">
5563
Engine:
56-
<select style="padding:2px 6px;border-radius:4px;" id="engine">
64+
<select style="padding:2px 6px;border-radius:4px;" title="Engine" id="engine">
5765
<option value="gemini">Gemini</option>
5866
<option value="chatgpt">ChatGPT</option>
5967
<option value="mermaidjs">MermaidJS</option>
6068
</select>
6169
</div>
6270
<div style="opacity:0.5;margin-left:20px;border-radius:4px;">
63-
Key: <input style="padding:2px 6px;" id="apikey">
71+
Key: <input style="padding:2px 6px;" title="API Key" id="apikey">
6472
</div>
65-
<button style="position:relative;margin-left:20px;" id="generate" onclick="generate();return false;">
73+
<button style="position:relative;margin-left:20px;" title="Preview Diagram" id="generate" onclick="generate();return false;">
6674
Preview Diagram
6775
</button>
6876
</div>
@@ -74,7 +82,7 @@
7482
style="border:5px solid transparent;box-sizing:border-box;position:absolute;width:100%;height:100%;"></iframe>
7583
</div>
7684
<div style="position:relative;display:flex;align-items:center;justify-items:stretch;padding-top:10px;">
77-
<button disabled="disabled" style="position:relative;margin-left:auto;" id="edit">
85+
<button disabled="disabled" style="position:relative;margin-left:auto;" title="Edit Diagram" id="edit">
7886
Edit Diagram
7987
</button>
8088
</div>
@@ -98,15 +106,9 @@
98106
var apikey = document.getElementById('apikey').value;
99107
var prompt = document.getElementById('prompt').value;
100108

101-
document.getElementById('edit').disabled = true;
102-
document.getElementById('generate').disabled = true;
103-
document.getElementById('preview').removeAttribute('src');
104-
document.getElementById('preview').style.display = 'none';
105-
document.getElementById('preview').parentNode.style.backgroundImage = spin;
106-
107109
async function sendPostRequest(url, data) {
108110
try {
109-
console.log('Request:', url, data);
111+
console.log('Request:', [url, data]);
110112

111113
var headers = {
112114
'Content-Type': 'application/json'
@@ -128,7 +130,7 @@
128130

129131
const jsonResponse = await response.json();
130132

131-
console.log('Response:', jsonResponse);
133+
console.log('Response:', [jsonResponse]);
132134

133135
return jsonResponse;
134136
} catch (error) {
@@ -137,64 +139,93 @@
137139
}
138140
};
139141

140-
if (engine == 'gemini') {
141-
var url = 'https://generativelanguage.googleapis.com/v1beta/models/gemini-1.5-flash:generateContent?key=' + apikey;
142-
sendPostRequest(url, {
143-
contents:
144-
[{
145-
parts:
146-
[{
147-
text: 'Write the declaration code for a ' + prompt +
148-
' using correct MermaidJS syntax and do not provide additional text in your response'
149-
}]
150-
}]
151-
}).then(function (response) {
152-
preview(extractMermaid(response.candidates[0].content.parts[0].text));
153-
}).catch(function (error) {
154-
document.getElementById('generate').disabled = false;
155-
document.getElementById('preview').parentNode.style.backgroundImage = 'none';
156-
alert('Error:' + error);
157-
});
158-
}
159-
else if (engine == 'chatgpt') {
160-
var url = 'https://api.openai.com/v1/chat/completions';
161-
sendPostRequest(url, {
162-
model: 'gpt-3.5-turbo',
163-
messages: [{
164-
'role': 'user', 'content': 'Write the declaration code for a ' + prompt +
165-
' using correct MermaidJS syntax and do not provide additional text in your response'
166-
}]
167-
}).then(function (response) {
168-
preview(extractMermaid(response.choices[0].message.content));
169-
});
170-
}
171-
else if (engine == 'mermaidjs') {
172-
preview(prompt);
142+
if (engine != 'mermaidjs' && apikey == '') {
143+
alert('API key is required for ' + engine);
173144
}
174145
else
175146
{
176-
document.getElementById('generate').disabled = false;
177-
document.getElementById('preview').parentNode.style.backgroundImage = 'none';
178-
alert('Invalid engine');
147+
document.getElementById('edit').disabled = true;
148+
document.getElementById('generate').disabled = true;
149+
document.getElementById('preview').removeAttribute('src');
150+
document.getElementById('preview').style.display = 'none';
151+
document.getElementById('preview').parentNode.style.backgroundImage = spin;
152+
153+
var aiprompt = (engine == 'chatgpt') ? 'Write a detailed and complex MermaidJS declaration for ' +
154+
(prompt != '' ? prompt : 'random diagram') + ' and return only the valid MermaidJS syntax' :
155+
'Create a diagram for ' + (prompt != '' ? prompt : 'something random') +
156+
' and return only the valid MermaidJS syntax';
157+
158+
console.log('Prompt:', [aiprompt]);
159+
160+
if (engine == 'gemini') {
161+
var url = 'https://generativelanguage.googleapis.com/v1beta/models/gemini-1.5-flash:generateContent?key=' + apikey;
162+
sendPostRequest(url, {
163+
contents:
164+
[{
165+
parts:
166+
[{
167+
text: aiprompt
168+
}]
169+
}]
170+
}).then(function (response) {
171+
preview(extractCode(response.candidates[0].content.parts[0].text));
172+
}).catch(function (error) {
173+
document.getElementById('generate').disabled = false;
174+
document.getElementById('preview').parentNode.style.backgroundImage = 'none';
175+
alert('Error:' + error);
176+
});
177+
}
178+
else if (engine == 'chatgpt') {
179+
var url = 'https://api.openai.com/v1/chat/completions';
180+
sendPostRequest(url, {
181+
model: 'gpt-3.5-turbo',
182+
messages: [{
183+
'role': 'user', 'content': aiprompt
184+
}]
185+
}).then(function (response) {
186+
preview(extractCode(response.choices[0].message.content));
187+
});
188+
}
189+
else if (engine == 'mermaidjs') {
190+
preview(prompt, engine);
191+
}
192+
else
193+
{
194+
document.getElementById('generate').disabled = false;
195+
document.getElementById('preview').parentNode.style.backgroundImage = 'none';
196+
alert('Invalid engine');
197+
}
179198
}
180199
};
181200

182-
function extractMermaid(input) {
183-
return input.replace(/^```mermaid\n/, '').replace(/\n```\n$/, '').replace(/\n```$/, '');
201+
function extractCode(input) {
202+
return input.replace(/^```mermaid\n/, '').replace(/^```xml\n/, '').
203+
replace(/\n```\n$/, '').replace(/\n```$/, '');
184204
};
185205

186206
function preview(value) {
187-
var params = 'lightbox=1&dark=1&border=10';
188-
var prefix = (urlParams['dev'] == '1') ? 'https://test.draw.io/?dev=1&' : 'https://www.draw.io/?' + params;
189-
var link = prefix + params + '&create=' + encodeURIComponent(JSON.stringify({ type: 'mermaid', data: value }));
207+
var params = 'lightbox=1&dark=1&border=10&';
208+
var prefix = (urlParams['dev'] == '1') ?
209+
'https://test.draw.io/?dev=1&' :
210+
'https://www.draw.io/?' + params;
211+
var create = 'create=' + encodeURIComponent(
212+
JSON.stringify({type: 'mermaid', data: value}));
213+
var link = prefix + params + create;
214+
215+
console.log('Result:', [value, link]);
216+
190217
document.getElementById('preview').src = link;
191218
document.getElementById('preview').style.display = 'block';
192219
document.getElementById('preview').parentNode.style.backgroundImage = 'none';
193-
prefix = (urlParams['dev'] == '1') ? 'https://test.draw.io/?dev=1&' : 'https://www.draw.io/?';
194-
link = prefix + 'create=' + encodeURIComponent(JSON.stringify({ type: 'mermaid', data: value }));
220+
prefix = (urlParams['dev'] == '1') ?
221+
'https://test.draw.io/?dev=1&' :
222+
'https://www.draw.io/?';
223+
link = prefix + create;
195224
document.getElementById('edit').disabled = false;
196225
document.getElementById('generate').disabled = false;
197-
document.getElementById('edit').onclick = function () { window.open(link); };
226+
document.getElementById('edit').onclick = function () {
227+
window.open(link);
228+
};
198229
};
199230

200231
var urlParams = (function (url) {
@@ -262,6 +293,10 @@
262293
document.getElementById('prompt').value = decodeURIComponent(urlParams['prompt']);
263294
generate();
264295
}
296+
else
297+
{
298+
document.getElementById('prompt').focus();
299+
}
265300
}
266301
//]]>
267302
</script>

0 commit comments

Comments
 (0)