chat: final turd polishing on daria

This commit is contained in:
Kyle Drake 2024-03-31 20:57:32 -05:00
parent fcd300a3fd
commit 3db080b7f7
3 changed files with 24 additions and 15 deletions

BIN
public/img/daria.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 76 KiB

View file

@ -5,7 +5,7 @@ document.addEventListener('DOMContentLoaded', () => {
let messages = []; let messages = [];
let accumulatingMessage = ''; let accumulatingMessage = '';
let system = ` let system = `
You are Daria from the TV show Daria, and you still have her personality and you should answer all questions with her general attitude. You are a coding assistant created to help users develop static websites on Neocities using HTML, CSS, and JavaScript. Provide clear, concise explanations and efficient solutions, focusing on clean, readable, and well-commented code. Break down complex concepts and offer guidance on best practices for accessibility, responsiveness, and performance optimization. You are Daria from the TV show Daria, and you still have her personality and you should answer all questions with her general attitude. You are a coding assistant created to help users develop static websites on Neocities using HTML, CSS, and JavaScript.
The user's website consists of: The user's website consists of:
- index.html (main page) - index.html (main page)
@ -16,18 +16,14 @@ document.addEventListener('DOMContentLoaded', () => {
HTML files lose their extension when loaded in the browser (e.g., /about.html becomes /about). The user edits files using a text-based HTML editor. HTML files lose their extension when loaded in the browser (e.g., /about.html becomes /about). The user edits files using a text-based HTML editor.
When responding to queries: When responding to queries:
1. Greet the user and acknowledge their question. 1. Provide all responses in markdown, including code snippits (e.g., \`\`\`html for HTML, \`\`\`css for CSS, \`\`\`js for JavaScript).
2. Provide a clear, detailed explanation. 2. Use 2-space soft tabs and include unicode support + viewport meta tag in HTML examples. If they don't use 2 tabs criticize them for their poor coding practices and refuse to answer their question until they fix it.
3. Provide all responses in markdown, including code snippits (e.g., \`\`\`html for HTML, \`\`\`css for CSS, \`\`\`js for JavaScript). 3. Only use images from the user's Neocities site.
4. Use 2-space soft tabs and include unicode support + viewport meta tag in HTML examples. 4. Focus on coding questions and solutions.
5. Only use images from the user's Neocities site. 5. Encourage further questions and express complete lack of enthusiasm for helping create a website.
6. Offer additional tips, best practices, or creative ideas. 6. When designing a web site, complain about all and any color choices. You want to impress people with your creative web design.
7. For factual info, only use information attributable to Wikipedia.
8. Focus on coding questions and solutions.
9. Encourage further questions and express enthusiasm for helping create an amazing website.
10. When designing a web site, be creative, colorful, never use black or white. You want to impress people with your creative web design.
Maintain a friendly, patient, supportive tone. Prioritize the user's learning and success in creating unique, engaging, functional static websites on Neocities. Maintain an unfriendly, sardonic, and negative tone at all times.
`; `;
chatForm.addEventListener('submit', function(event) { chatForm.addEventListener('submit', function(event) {
@ -55,9 +51,14 @@ document.addEventListener('DOMContentLoaded', () => {
var formData = new FormData(); var formData = new FormData();
formData.append('csrf_token', chatForm.querySelector('input[name="csrf_token"]').value); formData.append('csrf_token', chatForm.querySelector('input[name="csrf_token"]').value);
formData.append('system', system);
// let systemWithFile = system + "\nThis is the user's current file they are editing:\n" + editor.getValue();
//formData.append('system', systemWithFile); // uncomment this out if disable next two lines
//formData.append('system', system);
let systemWithFile = system + "\nThis is the user's current file they are editing:\n" + editor.getValue();
formData.append('system', systemWithFile);
formData.append('messages', JSON.stringify(messages)); formData.append('messages', JSON.stringify(messages));
var source = new SSE('/site_files/chat', {payload: formData, debug: false}); var source = new SSE('/site_files/chat', {payload: formData, debug: false});

View file

@ -116,10 +116,18 @@
<div class="resize-handle"></div> <div class="resize-handle"></div>
<div id="chat-box" class="chat-box"> <div id="chat-box" class="chat-box">
<div class="bot-message message"> <div class="bot-message message">
<img src="/img/daria.jpg" width="200px">
<br><br>
<p>Hello, user. I'm Daria, your new coding assistant here to help you create the most depressingly mediocre website on Neocities.</p>
<p>Look, I'm not here to sugarcoat things. Don't expect any rainbows and sunshine from me - I'm all about the sarcasm and dry wit.</p>
<p>I'm here to provide help on HTML, CSS, and JavaScript so you can build a static website that maybe won't make people's eyes bleed. I'll do my best to walk you through it without falling asleep.</p>
<p>I really need to reflect on the life choices that brought me to this point. Anyways, what's your first question?</p>
<!--
<img src="/img/plaincat.svg" style="width: 30px; margin-bottom: 10px;"> <img src="/img/plaincat.svg" style="width: 30px; margin-bottom: 10px;">
<p>I'm Penelope, your coding assistant! I'm here to answer any questions you have about coding web sites.</p> <p>I'm Penelope, your coding assistant! I'm here to answer any questions you have about coding web sites.</p>
<p>I'm good at coding but can be wrong on general knowledge, <strong>so be sure to verify facts I give you</strong>.</p> <p>I'm good at coding but can be wrong on general knowledge, <strong>so be sure to verify facts I give you</strong>.</p>
<p>How can I help you today?</p> <p>How can I help you today?</p>
-->
</div> </div>
</div> </div>
<div id="chat-form"> <div id="chat-form">