Skip to content

Commit 29351b9

Browse files
aldergalderg
committed
Fixes styling of page
1 parent 3f911f7 commit 29351b9

File tree

1 file changed

+217
-147
lines changed

1 file changed

+217
-147
lines changed

‎tools/generate.html

+217-147
Original file line numberDiff line numberDiff line change
@@ -1,169 +1,239 @@
1-
<!--[if IE]><meta http-equiv="X-UA-Compatible" content="IE=edge" ><![endif]-->
21
<!DOCTYPE html>
32
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
43
<head>
5-
<title>Generate draw.io diagram</title>
6-
<meta charset="utf-8"/>
7-
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
8-
<script type="text/javascript">
9-
//<![CDATA[
10-
11-
function replaceEscapes() {
12-
var input = document.getElementById('textarea').value;
13-
// Replace Unicode escape sequences
14-
input = input.replace(/\\u([0-9A-Fa-f]{4})/g, (match, group) =>
15-
String.fromCharCode(parseInt(group, 16))
16-
);
17-
// Replace newline escape sequences
18-
document.getElementById('textarea').value = input.replace(/\\n/g, '\n');
19-
}
20-
21-
function generate()
22-
{
23-
document.getElementById('generate').disabled = true;
24-
async function sendPostRequest(url, data) {
25-
try {
26-
const response = await fetch(url, {
4+
<title>Generate draw.io Diagrams</title>
5+
<meta charset="utf-8" />
6+
<style type="text/css">
7+
body {
8+
color-scheme: dark;
9+
background: light-dark(rgb(255, 255, 255), rgb(18, 18, 18));
10+
color: light-dark(rgb(18, 18, 18), white);
11+
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+
font-size: 16px;
14+
}
15+
button {
16+
padding: 10px;
17+
background: #1a4cad;
18+
border: none;
19+
border-radius: 4px;
20+
}
21+
</style>
22+
</head>
23+
<body>
24+
<div style="display:flex;opacity:0.9;align-items:center;padding:20px 20px 10px 20px;">
25+
<svg viewBox="24 26 68 68" style="width:28px;display:inline-block;">
26+
<line y2="72.394" x2="41.061" y1="43.384" x1="58.069" stroke-miterlimit="10" stroke-width="3.5528"
27+
stroke="currentColor" fill="none" />
28+
<line y2="72.394" x2="75.076" y1="43.384" x1="58.068" stroke-miterlimit="10" stroke-width="3.5008"
29+
stroke="currentColor" fill="none" />
30+
<path
31+
d="M52.773,77.084c0,1.954-1.599,3.553-3.553,3.553H36.999c-1.954,0-3.553-1.599-3.553-3.553v-9.379c0-1.954,1.599-3.553,3.553-3.553h12.222c1.954,0,3.553,1.599,3.553,3.553V77.084z"
32+
fill="currentColor" />
33+
<path
34+
d="M67.762,48.074c0,1.954-1.599,3.553-3.553,3.553H51.988c-1.954,0-3.553-1.599-3.553-3.553v-9.379c0-1.954,1.599-3.553,3.553-3.553H64.21c1.954,0,3.553,1.599,3.553,3.553V48.074z"
35+
fill="currentColor" />
36+
<path
37+
d="M82.752,77.084c0,1.954-1.599,3.553-3.553,3.553H66.977c-1.954,0-3.553-1.599-3.553-3.553v-9.379c0-1.954,1.599-3.553,3.553-3.553h12.222c1.954,0,3.553,1.599,3.553,3.553V77.084z"
38+
fill="currentColor" />
39+
</svg>
40+
<span style="font-family:Helvetica;font-weight:700;font-size:20px;margin-left:4px;">draw.io</span>
41+
</div>
42+
<div style="display:block;align-items:center;padding:20px;">
43+
<textarea id="prompt"
44+
style="width:100%;height:60px;font-family:inherit;font-size:inherit;padding:10px;box-sizing:border-box;resize:vertical;"
45+
placeholder="Diagram description, eg. five tier sequence diagram on how to order fast food online"
46+
spellcheck="false" autocomplete="off" autocorrect="off" autocapitalize="off"></textarea>
47+
<div style="position:relative;display:flex;align-items:center;justify-items:stretch;padding-top:10px;">
48+
<div style="margin-left:auto;opacity:0.5;">
49+
Engine:
50+
<select style="padding:4px;border-radius:4px;" id="engine">
51+
<option value="gemini">Gemini</option>
52+
<option value="chatgpt">ChatGPT</option>
53+
</select>
54+
</div>
55+
<div style="opacity:0.5;margin-left:20px;border-radius:4px;">
56+
Key: <input style="padding:4px;" id="apikey">
57+
</div>
58+
<button style="position:relative;margin-left:20px;" id="generate" onclick="generate();return false;">
59+
Generate Diagram
60+
</button>
61+
</div>
62+
</div>
63+
<div style="display:block;align-items:center;padding:20px;">
64+
<div
65+
style="position:relative;height:640px;border:1px solid rgb(133, 133, 133);resize:vertical;overflow:auto;box-sizing:border-box;background-repeat:no-repeat;background-position:center center;background-image:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj4KPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2ZXJzaW9uPSIxLjEiIHdpZHRoPSI2MHB4IiBoZWlnaHQ9IjMwcHgiIHZpZXdCb3g9Ii0wLjUgLTAuNSA2MCAzMCIgY2xhc3M9ImdlLWV4cG9ydC1zdmctZGFyayI+PGRlZnM+PHN0eWxlIHR5cGU9InRleHQvY3NzIj5zdmcuZ2UtZXhwb3J0LXN2Zy1kYXJrOm5vdChtangtY29udGFpbmVyICZndDsgc3ZnKSB7IGZpbHRlcjogaW52ZXJ0KDEwMCUpIGh1ZS1yb3RhdGUoMTgwZGVnKTsgfSYjeGE7c3ZnLmdlLWV4cG9ydC1zdmctZGFyayBmb3JlaWduT2JqZWN0IGltZywmI3hhO3N2Zy5nZS1leHBvcnQtc3ZnLWRhcmsgaW1hZ2U6bm90KHN2Zy5nZS1leHBvcnQtc3ZnLWRhcmsgc3dpdGNoIGltYWdlKSwmI3hhO3N2Zy5nZS1leHBvcnQtc3ZnLWRhcmsgc3ZnOm5vdChtangtY29udGFpbmVyICZndDsgc3ZnKSYjeGE7eyBmaWx0ZXI6IGludmVydCgxMDAlKSBodWUtcm90YXRlKDE4MGRlZykgfTwvc3R5bGU+PC9kZWZzPjxnPjxnIGRhdGEtY2VsbC1pZD0iMCI+PGcgZGF0YS1jZWxsLWlkPSIxIj48ZyBkYXRhLWNlbGwtaWQ9IkI0WHVrdVk0T2NSTERVNlBqQ0Y4LTEiPjxnPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSI2MCIgaGVpZ2h0PSIzMCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJub25lIiBwb2ludGVyLWV2ZW50cz0iYWxsIi8+PC9nPjxnPjxnIGZpbGw9InJnYigwLCAwLCAwKSIgZm9udC1mYW1pbHk9IiZxdW90O0hlbHZldGljYSZxdW90OyIgdGV4dC1hbmNob3I9Im1pZGRsZSIgZm9udC1zaXplPSIxNnB4IiBvcGFjaXR5PSIwLjUiPjx0ZXh0IHg9IjI5LjUiIHk9IjIxLjUiPlByZXZpZXc8L3RleHQ+PC9nPjwvZz48L2c+PC9nPjwvZz48L2c+PC9zdmc+);">
66+
<iframe id="preview" allowtransparency="true"
67+
style="border:5px solid transparent;box-sizing:border-box;position:absolute;width:100%;height:100%;"></iframe>
68+
</div>
69+
<div style="position:relative;display:flex;align-items:center;justify-items:stretch;padding-top:10px;">
70+
<button disabled="disabled" style="position:relative;margin-left:auto;" id="edit">
71+
Edit Diagram
72+
</button>
73+
</div>
74+
</div>
75+
<script type="text/javascript">
76+
//<![CDATA[
77+
var spin = 'url(data:image/svg+xml;base64,77u/PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAyMDAgMjAwJz48Y2lyY2xlIGZpbGw9JyM4MDgwODAnIHN0cm9rZT0nIzgwODA4MCcgc3Ryb2tlLXdpZHRoPScxNScgcj0nMTUnIGN4PSczNScgY3k9JzEwMCcgZGF0YS1kYXJrcmVhZGVyLWlubGluZS1maWxsPScnIGRhdGEtZGFya3JlYWRlci1pbmxpbmUtc3Ryb2tlPScnIHN0eWxlPSctLWRhcmtyZWFkZXItaW5saW5lLWZpbGw6ICNmZjZkZmY7IC0tZGFya3JlYWRlci1pbmxpbmUtc3Ryb2tlOiAjZmY2ZGZmOyc+PGFuaW1hdGUgYXR0cmlidXRlTmFtZT0nY3gnIGNhbGNNb2RlPSdzcGxpbmUnIGR1cj0nNC4yJyB2YWx1ZXM9JzM1OzE2NTsxNjU7MzU7MzUnIGtleVNwbGluZXM9JzAgLjEgLjUgMTswIC4xIC41IDE7MCAuMSAuNSAxOzAgLjEgLjUgMScgcmVwZWF0Q291bnQ9J2luZGVmaW5pdGUnIGJlZ2luPScwJz48L2FuaW1hdGU+PC9jaXJjbGU+PGNpcmNsZSBmaWxsPScjODA4MDgwJyBzdHJva2U9JyM4MDgwODAnIHN0cm9rZS13aWR0aD0nMTUnIG9wYWNpdHk9Jy44JyByPScxNScgY3g9JzM1JyBjeT0nMTAwJyBkYXRhLWRhcmtyZWFkZXItaW5saW5lLWZpbGw9JycgZGF0YS1kYXJrcmVhZGVyLWlubGluZS1zdHJva2U9Jycgc3R5bGU9Jy0tZGFya3JlYWRlci1pbmxpbmUtZmlsbDogI2ZmNmRmZjsgLS1kYXJrcmVhZGVyLWlubGluZS1zdHJva2U6ICNmZjZkZmY7Jz48YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSdjeCcgY2FsY01vZGU9J3NwbGluZScgZHVyPSc0LjInIHZhbHVlcz0nMzU7MTY1OzE2NTszNTszNScga2V5U3BsaW5lcz0nMCAuMSAuNSAxOzAgLjEgLjUgMTswIC4xIC41IDE7MCAuMSAuNSAxJyByZXBlYXRDb3VudD0naW5kZWZpbml0ZScgYmVnaW49JzAuMDUnPjwvYW5pbWF0ZT48L2NpcmNsZT48Y2lyY2xlIGZpbGw9JyM4MDgwODAnIHN0cm9rZT0nIzgwODA4MCcgc3Ryb2tlLXdpZHRoPScxNScgb3BhY2l0eT0nLjYnIHI9JzE1JyBjeD0nMzUnIGN5PScxMDAnIGRhdGEtZGFya3JlYWRlci1pbmxpbmUtZmlsbD0nJyBkYXRhLWRhcmtyZWFkZXItaW5saW5lLXN0cm9rZT0nJyBzdHlsZT0nLS1kYXJrcmVhZGVyLWlubGluZS1maWxsOiAjZmY2ZGZmOyAtLWRhcmtyZWFkZXItaW5saW5lLXN0cm9rZTogI2ZmNmRmZjsnPjxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9J2N4JyBjYWxjTW9kZT0nc3BsaW5lJyBkdXI9JzQuMicgdmFsdWVzPSczNTsxNjU7MTY1OzM1OzM1JyBrZXlTcGxpbmVzPScwIC4xIC41IDE7MCAuMSAuNSAxOzAgLjEgLjUgMTswIC4xIC41IDEnIHJlcGVhdENvdW50PSdpbmRlZmluaXRlJyBiZWdpbj0nLjEnPjwvYW5pbWF0ZT48L2NpcmNsZT48Y2lyY2xlIGZpbGw9JyM4MDgwODAnIHN0cm9rZT0nIzgwODA4MCcgc3Ryb2tlLXdpZHRoPScxNScgb3BhY2l0eT0nLjQnIHI9JzE1JyBjeD0nMzUnIGN5PScxMDAnIGRhdGEtZGFya3JlYWRlci1pbmxpbmUtZmlsbD0nJyBkYXRhLWRhcmtyZWFkZXItaW5saW5lLXN0cm9rZT0nJyBzdHlsZT0nLS1kYXJrcmVhZGVyLWlubGluZS1maWxsOiAjZmY2ZGZmOyAtLWRhcmtyZWFkZXItaW5saW5lLXN0cm9rZTogI2ZmNmRmZjsnPjxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9J2N4JyBjYWxjTW9kZT0nc3BsaW5lJyBkdXI9JzQuMicgdmFsdWVzPSczNTsxNjU7MTY1OzM1OzM1JyBrZXlTcGxpbmVzPScwIC4xIC41IDE7MCAuMSAuNSAxOzAgLjEgLjUgMTswIC4xIC41IDEnIHJlcGVhdENvdW50PSdpbmRlZmluaXRlJyBiZWdpbj0nLjE1Jz48L2FuaW1hdGU+PC9jaXJjbGU+PGNpcmNsZSBmaWxsPScjODA4MDgwJyBzdHJva2U9JyM4MDgwODAnIHN0cm9rZS13aWR0aD0nMTUnIG9wYWNpdHk9Jy4yJyByPScxNScgY3g9JzM1JyBjeT0nMTAwJyBkYXRhLWRhcmtyZWFkZXItaW5saW5lLWZpbGw9JycgZGF0YS1kYXJrcmVhZGVyLWlubGluZS1zdHJva2U9Jycgc3R5bGU9Jy0tZGFya3JlYWRlci1pbmxpbmUtZmlsbDogI2ZmNmRmZjsgLS1kYXJrcmVhZGVyLWlubGluZS1zdHJva2U6ICNmZjZkZmY7Jz48YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSdjeCcgY2FsY01vZGU9J3NwbGluZScgZHVyPSc0LjInIHZhbHVlcz0nMzU7MTY1OzE2NTszNTszNScga2V5U3BsaW5lcz0nMCAuMSAuNSAxOzAgLjEgLjUgMTswIC4xIC41IDE7MCAuMSAuNSAxJyByZXBlYXRDb3VudD0naW5kZWZpbml0ZScgYmVnaW49Jy4yJz48L2FuaW1hdGU+PC9jaXJjbGU+PC9zdmc+)';
78+
79+
function generate() {
80+
var engine = document.getElementById('engine').value;
81+
var apikey = document.getElementById('apikey').value;
82+
var prompt = document.getElementById('prompt').value;
83+
84+
document.getElementById('edit').disabled = true;
85+
document.getElementById('generate').disabled = true;
86+
document.getElementById('preview').removeAttribute('src');
87+
document.getElementById('preview').style.display = 'none';
88+
document.getElementById('preview').parentNode.style.backgroundImage = spin;
89+
90+
async function sendPostRequest(url, data) {
91+
try {
92+
console.log('Request:', url, data);
93+
94+
var headers = {
95+
'Content-Type': 'application/json'
96+
};
97+
98+
if (engine == 'chatgpt') {
99+
headers['Authorization'] = 'Bearer ' + apikey;
100+
}
101+
102+
var response = await fetch(url, {
27103
method: 'POST',
28-
headers: {
29-
'Content-Type': 'application/json' // Specify JSON content
30-
},
31-
body: JSON.stringify(data) // Convert data to JSON string
32-
});
104+
headers: headers,
105+
body: JSON.stringify(data)
106+
});
33107

34-
document.getElementById('generate').disabled = false;
108+
document.getElementById('generate').disabled = false;
35109

36-
if (!response.ok) {
110+
if (!response.ok) {
37111
throw new Error(`HTTP error! Status: ${response.status}`);
112+
}
113+
114+
const jsonResponse = await response.json();
115+
116+
console.log('Response:', jsonResponse);
117+
118+
return jsonResponse;
119+
} catch (error) {
120+
console.error('Error:', error);
121+
throw error;
38122
}
123+
};
124+
125+
if (engine == 'gemini') {
126+
var url = 'https://generativelanguage.googleapis.com/v1beta/models/gemini-1.5-flash:generateContent?key=' + apikey;
127+
sendPostRequest(url, {
128+
contents:
129+
[{
130+
parts:
131+
[{
132+
text: 'Write the declaration code for a ' + prompt +
133+
' using correct MermaidJS syntax and do not provide additional text in your response'
134+
}]
135+
}]
136+
}).then(function (response) {
137+
preview(extractMermaid(response.candidates[0].content.parts[0].text));
138+
}).catch(function (error) {
139+
document.getElementById('generate').disabled = false;
140+
document.getElementById('preview').parentNode.style.backgroundImage = 'none';
141+
alert('Error:' + error);
142+
});
143+
}
144+
else if (engine == 'chatgpt') {
145+
var url = 'https://api.openai.com/v1/chat/completions';
146+
sendPostRequest(url, {
147+
model: 'gpt-3.5-turbo',
148+
messages: [{
149+
'role': 'user', 'content': 'Write the declaration code for a ' + prompt +
150+
' using correct MermaidJS syntax and do not provide additional text in your response'
151+
}]
152+
}).then(function (response) {
153+
preview(extractMermaid(response.choices[0].message.content));
154+
});
155+
}
156+
};
157+
158+
function extractMermaid(input) {
159+
return input.replace(/^```mermaid\n/, '').replace(/\n```\n$/, '').replace(/\n```$/, '');
160+
};
161+
162+
function preview(value) {
163+
var params = 'lightbox=1&dark=1&border=10';
164+
var prefix = (urlParams['dev'] == '1') ? 'https://test.draw.io/?dev=1&' : 'https://www.draw.io/?' + params;
165+
var link = prefix + params + '&create=' + encodeURIComponent(JSON.stringify({ type: 'mermaid', data: value }));
166+
document.getElementById('preview').src = link;
167+
document.getElementById('preview').style.display = 'block';
168+
document.getElementById('preview').parentNode.style.backgroundImage = 'none';
169+
prefix = (urlParams['dev'] == '1') ? 'https://test.draw.io/?dev=1&' : 'https://www.draw.io/?';
170+
link = prefix + 'create=' + encodeURIComponent(JSON.stringify({ type: 'mermaid', data: value }));
171+
document.getElementById('edit').disabled = false;
172+
document.getElementById('edit').onclick = function () { window.open(link); };
173+
};
39174

40-
const jsonResponse = await response.json(); // Parse the JSON response
41-
return jsonResponse;
42-
} catch (error) {
43-
console.error('Error:', error);
44-
throw error; // Re-throw the error for further handling
175+
var urlParams = (function (url) {
176+
var result = new Object();
177+
var idx = url.lastIndexOf('#');
178+
179+
if (idx > 0) {
180+
var params = url.substring(idx + 1).split('&');
181+
182+
for (var i = 0; i < params.length; i++) {
183+
idx = params[i].indexOf('=');
184+
185+
if (idx > 0) {
186+
result[params[i].substring(0, idx)] = params[i].substring(idx + 1);
187+
}
188+
}
189+
}
190+
191+
return result;
192+
})(window.location.href);
193+
194+
if (urlParams['key'] != null) {
195+
document.getElementById('apikey').value = urlParams['key'];
45196
}
46-
}
47-
48-
var apikey = document.getElementById('apikey').value;
49-
var prompt = document.getElementById('prompt').value;
50-
51-
var url = 'https://generativelanguage.googleapis.com/v1beta/models/gemini-1.5-flash:generateContent?key=' + apikey;
52-
sendPostRequest(url, {contents:
53-
[{parts:
54-
[{text: 'Write the declaration code for a ' + prompt +
55-
' using correct MermaidJS syntax and do not provide additional text in your response'}]
56-
}]}).then(function(response) {
57-
var value = extractMermaid(response.candidates[0].content.parts[0].text);
58-
document.getElementById('mermaid').value = value;
59-
preview();
60-
});
61-
};
62-
63-
function extractMermaid(input)
64-
{
65-
return input.replace(/^```mermaid\n/, '').replace(/\n```\n$/, '');
66-
};
67-
68-
function preview()
69-
{
70-
var value = document.getElementById('mermaid').value;
71-
var prefix = (urlParams['dev'] == '1') ?
72-
'https://test.draw.io/?dev=1&lightbox=1&border=10&' :
73-
'https://www.draw.io/?lightbox=1&border=10&';
74-
var link = prefix + 'create=' + encodeURIComponent(JSON.stringify({type: 'mermaid', data: value}));
75-
document.getElementById('preview').removeAttribute('srcdoc');
76-
document.getElementById('preview').src = link;
77-
prefix = (urlParams['dev'] == '1') ? 'https://test.draw.io/?dev=1&' : 'https://www.draw.io/?';
78-
link = prefix + 'create=' + encodeURIComponent(JSON.stringify({type: 'mermaid', data: value}));
79-
document.getElementById('link').innerHTML = '<a href="' + link + '" target="_blank">Open in draw.io</a>';
80-
};
81-
//]]>
82-
</script>
83-
</head>
84-
<body style="color-scheme:light dark;">
85-
<h2>Generate diagram</h2>
86-
Engine: <select id="engine">
87-
<option value="gemini">Gemini</option>
88-
</select> API Key: <input size="50" id="apikey">
89-
<br><br>
90-
<textarea rows="3" cols="80" id="prompt" placeholder="Diagram description, eg. five tier sequence diagram on how to order fast food online" spellcheck="false" autocomplete="off" autocorrect="off" autocapitalize="off"></textarea>
91-
<br/>
92-
<button id="generate" onclick="generate();return false;">Generate</button><br/><br/>
93-
<textarea rows="19" cols="36" id="mermaid" placeholder="Mermaid Syntax" spellcheck="false" autocomplete="off" autocorrect="off" autocapitalize="off"></textarea>
94-
<iframe id="preview" srcdoc="<div style='color:gray';>Preview</div>" width="340" height="298" frameborder="0" style="border:1px solid gray;resize:both;"></iframe>
95-
<br/>
96-
<button onclick="preview();return false;">Update</button>
97-
<span style="margin-left:4px;" id="link"></span>
98-
<script type="text/javascript">
99-
//<![CDATA[
100-
// Enables dropping files
101-
var urlParams = (function(url) {
102-
var result = new Object();
103-
var idx = url.lastIndexOf('?');
104-
105-
if (idx > 0) {
106-
var params = url.substring(idx + 1).split('&');
107-
108-
for ( var i = 0; i < params.length; i++) {
109-
idx = params[i].indexOf('=');
110-
111-
if (idx > 0) {
112-
result[params[i].substring(0, idx)] = params[i].substring(idx + 1);
113-
}
114-
}
115-
}
116-
117-
return result;
118-
})(window.location.href);
119-
120-
document.getElementById('apikey').value = urlParams['key'];
121-
122-
if (window.File != null && window.FileReader != null && window.FileList != null)
123-
{
124-
function handleDrop(evt)
125-
{
197+
198+
if (window.File != null && window.FileReader != null && window.FileList != null) {
199+
function handleDrop(evt) {
126200
evt.stopPropagation();
127201
evt.preventDefault();
128202

129-
if (evt.dataTransfer.files.length > 0)
130-
{
131-
var file = evt.dataTransfer.files[0];
203+
if (evt.dataTransfer.files.length > 0) {
204+
var file = evt.dataTransfer.files[0];
132205

133-
var reader = new FileReader();
134-
reader.onload = function (e)
135-
{
136-
evt.target.value = e.target.result;
137-
};
138-
reader.readAsText(file);
206+
var reader = new FileReader();
207+
reader.onload = function (e) {
208+
evt.target.value = e.target.result;
209+
};
210+
reader.readAsText(file);
139211
}
140-
};
212+
};
141213

142-
function handleDragOver(evt)
143-
{
214+
function handleDragOver(evt) {
144215
evt.stopPropagation();
145216
evt.preventDefault();
146-
};
147-
148-
// Setup the dnd listeners.
149-
var textarea = document.getElementById('prompt');
150-
textarea.addEventListener('dragover', handleDragOver, false);
151-
textarea.addEventListener('drop', handleDrop, false);
152-
153-
var textarea = document.getElementById('mermaid');
154-
textarea.addEventListener('dragover', handleDragOver, false);
155-
textarea.addEventListener('drop', handleDrop, false);
217+
};
218+
219+
// Setup the dnd listeners.
220+
var textarea = document.getElementById('prompt');
221+
textarea.addEventListener('dragover', handleDragOver, false);
222+
textarea.addEventListener('drop', handleDrop, false);
223+
224+
// Invokes generate on enter key
225+
document.getElementById('prompt').addEventListener('keypress', function (e) {
226+
if (e.key === 'Enter') {
227+
generate();
228+
e.preventDefault();
229+
}
230+
});
156231

157-
// Invoke generate on enter key
158-
document.getElementById('prompt').addEventListener('keypress', function(e) {
159-
if (e.key === 'Enter') {
160-
generate();
161-
e.preventDefault();
232+
if (urlParams['engine'] != null) {
233+
document.getElementById('engine').value = urlParams['engine'];
162234
}
163-
});
164-
}
165-
//]]>
166-
</script>
167-
</form>
235+
}
236+
//]]>
237+
</script>
168238
</body>
169239
</html>

0 commit comments

Comments
 (0)