Skip to content

Commit 7375f7b

Browse files
aldergalderg
committed
Adds testing for Gemini AI diagrams
1 parent a7fd346 commit 7375f7b

File tree

2 files changed

+180
-0
lines changed

2 files changed

+180
-0
lines changed

‎tools/generate.html

+168
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,168 @@
1+
<!--[if IE]><meta http-equiv="X-UA-Compatible" content="IE=edge" ><![endif]-->
2+
<!DOCTYPE html>
3+
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
4+
<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, {
27+
method: 'POST',
28+
headers: {
29+
'Content-Type': 'application/json' // Specify JSON content
30+
},
31+
body: JSON.stringify(data) // Convert data to JSON string
32+
});
33+
34+
document.getElementById('generate').disabled = false;
35+
36+
if (!response.ok) {
37+
throw new Error(`HTTP error! Status: ${response.status}`);
38+
}
39+
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
45+
}
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').src = link;
76+
prefix = (urlParams['dev'] == '1') ? 'https://test.draw.io/?dev=1&' : 'https://www.draw.io/?';
77+
link = prefix + 'create=' + encodeURIComponent(JSON.stringify({type: 'mermaid', data: value}));
78+
document.getElementById('link').innerHTML = '<a href="' + link + '" target="_blank">Open in draw.io</a>';
79+
};
80+
//]]>
81+
</script>
82+
</head>
83+
<body style="color-scheme:light dark;">
84+
<h2>Generate diagram</h2>
85+
Engine: <select id="engine">
86+
<option value="gemini">Gemini</option>
87+
</select> API Key: <input size="50" id="apikey">
88+
<br><br>
89+
<textarea rows="3" cols="80" id="prompt" placeholder="Prompt" spellcheck="false" autocomplete="off" autocorrect="off" autocapitalize="off">five tier sequence diagram on how to order fast food online</textarea>
90+
<br/>
91+
<button id="generate" onclick="generate();return false;">Generate</button><br/><br/>
92+
<textarea rows="19" cols="36" id="mermaid" placeholder="Mermaid Syntax" spellcheck="false" autocomplete="off" autocorrect="off" autocapitalize="off"></textarea>
93+
<iframe id="preview" width="340" height="298" frameborder="0" style="border:1px solid gray;"></iframe>
94+
<br/>
95+
<button onclick="preview();return false;">Update</button>
96+
<span style="margin-left:4px;" id="link"></span>
97+
<script type="text/javascript">
98+
//<![CDATA[
99+
// Enables dropping files
100+
var urlParams = (function(url) {
101+
var result = new Object();
102+
var idx = url.lastIndexOf('?');
103+
104+
if (idx > 0) {
105+
var params = url.substring(idx + 1).split('&');
106+
107+
for ( var i = 0; i < params.length; i++) {
108+
idx = params[i].indexOf('=');
109+
110+
if (idx > 0) {
111+
result[params[i].substring(0, idx)] = params[i].substring(idx + 1);
112+
}
113+
}
114+
}
115+
116+
return result;
117+
})(window.location.href);
118+
119+
document.getElementById('apikey').value = urlParams['key'];
120+
121+
if (window.File != null && window.FileReader != null && window.FileList != null)
122+
{
123+
function handleDrop(evt)
124+
{
125+
evt.stopPropagation();
126+
evt.preventDefault();
127+
128+
if (evt.dataTransfer.files.length > 0)
129+
{
130+
var file = evt.dataTransfer.files[0];
131+
132+
var reader = new FileReader();
133+
reader.onload = function (e)
134+
{
135+
evt.target.value = e.target.result;
136+
};
137+
reader.readAsText(file);
138+
}
139+
};
140+
141+
function handleDragOver(evt)
142+
{
143+
evt.stopPropagation();
144+
evt.preventDefault();
145+
};
146+
147+
// Setup the dnd listeners.
148+
var textarea = document.getElementById('prompt');
149+
textarea.addEventListener('dragover', handleDragOver, false);
150+
textarea.addEventListener('drop', handleDrop, false);
151+
152+
var textarea = document.getElementById('mermaid');
153+
textarea.addEventListener('dragover', handleDragOver, false);
154+
textarea.addEventListener('drop', handleDrop, false);
155+
156+
// Invoke generate on enter key
157+
document.getElementById('prompt').addEventListener('keypress', function(e) {
158+
if (e.key === 'Enter') {
159+
generate();
160+
e.preventDefault();
161+
}
162+
});
163+
}
164+
//]]>
165+
</script>
166+
</form>
167+
</body>
168+
</html>

‎tools/mermaid.html

+12
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,17 @@
77
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
88
<script type="text/javascript">
99
//<![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+
1021
function create()
1122
{
1223
var value = document.getElementById('textarea').value;
@@ -31,6 +42,7 @@ <h2>Mermaid diagram</h2>
3142
<textarea rows="20" cols="80" id="textarea" placeholder="Drop files here or enter text" spellcheck="false" autocomplete="off" autocorrect="off" autocapitalize="off"></textarea>
3243
<br/><br/>
3344
<button onclick="create();return false;">Create draw.io diagram</button>
45+
<button onclick="replaceEscapes();return false;">Replace Escapes</button>
3446
<span style="margin-left:4px;" id="link"></span>
3547
<script type="text/javascript">
3648
//<![CDATA[

0 commit comments

Comments
 (0)