adrien/Jade
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

added wasm again

Browse Source
This commit is contained in:
adrien
2024-06-16 14:38:46 +02:00
parent 43b0938d0d
commit 8ce8edf69d
6 changed files with 634 additions and 86 deletions
Download Patch File Download Diff File Expand all files Collapse all files
views/layouts/main.html
+8 -84
View File
@@ -23,96 +23,20 @@
<script src="https://unpkg.com/@highlightjs/cdn-assets@11.9.0/highlight.min.js"></script>
<script>hljs.highlightAll();</script>
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
<script src="wasm_exec.js"></script>
<script>
const go = new Go();
WebAssembly.instantiateStreaming(fetch("main-v0.3.wasm"), go.importObject).then((result) => {
go.run(result.instance);
});
</script>
</head>
<body>
{{ embed }}
<script>
// run printHello(); every 5 seconds
setInterval(function () {
printHello();
}, 5000);
function generateMessagePlaceholder(content) {
marked.setOptions({
highlight: function (code, lang) {
const language = hljs.getLanguage(lang) ? lang : 'plaintext';
return hljs.highlight(code, { language }).value;
}
});
// Convert the markdown content to HTML
const htmlContent = marked(content);
let userString = `
<div class="message-user mt-3 message-placeholder">
<div class="columns is-mobile">
<div class="column is-narrow" id="icon-column">
<figure class="image is-48x48 message-icon" style="flex-shrink: 0;">
<img src="icons/bouvai2.png" alt="User Image">
</figure>
</div>
<div class="column" id="content-column" style="width: 100px;">
<div class="is-flex is-align-items-start">
<div class="message-content" style="width: 100%; overflow-y: hidden;">
<div class="message-header">
<p>
You
</p>
</div>
<div class="message-body">
<div class="content" style="overflow-x: auto; width: 100%;">
${htmlContent}
</div>
</div>
</div>
</div>
<div class="is-flex is-justify-content mt-2">
<div style="height: 30px;"></div>
</div>
</div>
</div>
</div>
`;
let botString = `
<div class="message-bot mt-3 message-placeholder">
<div class="columns is-mobile">
<div class="column is-narrow" id="icon-column">
<figure class="image is-48x48 message-icon" style="flex-shrink: 0;">
<img src="icons/bouvai2.png" alt="User Image">
</figure>
</div>
<div class="column" style="width: 100px;">
<div class="is-flex is-align-items-start">
<div class="message-content">
<div class='message-header'>
<p>
Waiting...
</p>
</div>
<div class="message-body">
<div class="content">
<br>
<img src="/puff.svg" />
</div>
</div>
</div>
</div>
</div>
</div>
</div>
`;
return userString + botString;
}
</script>
<script>
function copyToClipboardCode(button) {
// Get the code element next to the button
views/partials/chat-input.html
+6 -2
View File
@@ -79,12 +79,16 @@
function toggleSendButton() {
// check if generate-multiple-messages exists
var generateMultipleMessages = document.getElementById('generate-multiple-messages');
document.getElementById('chat-input-send-btn').disabled = textarea.value.trim().length === 0 || document.getElementsByClassName('selected icon-llm').length === 0 || generateMultipleMessages !== null;
var disabled = textarea.value.trim().length === 0 || document.getElementsByClassName('selected icon-llm').length === 0 || generateMultipleMessages !== null;
document.getElementById('chat-input-send-btn').disabled = disabled;
// Do the same for all element with an id that start with redo-button- or edit-button-
const buttons = document.querySelectorAll('[id^="redo-button-"], [id^="edit-button-"]');
buttons.forEach(button => button.disabled = disabled);
}
function onClickSendButton() {
// TODO: Add the message placeholder using WASM
messagesPlaceholderHTML = generateMessagePlaceholder(textarea.value);
messagesPlaceholderHTML = generatePlaceholder(textarea.value);
document.getElementById('chat-messages').insertAdjacentHTML('beforeend', messagesPlaceholderHTML);
setTimeout(function () {
views/partials/message-bot-client-placeholder.html
+30
View File
@@ -0,0 +1,30 @@
<div class="message-bot mt-3 message-placeholder">
<div class="columns is-mobile">
<div class="column is-narrow" id="icon-column">
<figure class="image is-48x48 message-icon" style="flex-shrink: 0;">
<img src="icons/bouvai2.png" alt="User Image">
</figure>
<div class="column" id="content-column" style="width: 100px;">
<div class="is-flex is-align-items-start">
<div class="message-content">
<div class='message-header'>
<p>
Waiting...
</p>
</div>
<div class="message-body">
<div class="content">
<br>
<img src="/puff.svg" />
</div>
</div>
</div>
</div>
<div class="is-flex is-justify-content mt-2">
<div style="height: 30px;"></div>
</div>
</div>
</div>
</div>
views/partials/message-user-client-placeholder.html
+29
View File
@@ -0,0 +1,29 @@
<div class="message-user mt-3 message-placeholder">
<div class="columns is-mobile">
<div class="column is-narrow" id="icon-column">
<figure class="image is-48x48 message-icon" style="flex-shrink: 0;">
<img src="icons/bouvai2.png" alt="User Image">
</figure>
</div>
<div class="column" id="content-column" style="width: 100px;">
<div class="is-flex is-align-items-start">
<div class="message-content" style="width: 100%; overflow-y: hidden;">
<div class="message-header">
<p>
You
</p>
</div>
<div class="message-body">
<div class="content" style="overflow-x: auto; width: 100%;">
{{ Content | safe }}
</div>
</div>
</div>
</div>
<div class="is-flex is-justify-content mt-2">
<div style="height: 30px;"></div>
</div>
</div>
</div>
</div>