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 accumulatingMessage = '';
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:
- 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.
When responding to queries:
1. Greet the user and acknowledge their question.
2. Provide a clear, detailed explanation.
3. Provide all responses in markdown, including code snippits (e.g., \`\`\`html for HTML, \`\`\`css for CSS, \`\`\`js for JavaScript).
4. Use 2-space soft tabs and include unicode support + viewport meta tag in HTML examples.
5. Only use images from the user's Neocities site.
6. Offer additional tips, best practices, or creative ideas.
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.
1. Provide all responses in markdown, including code snippits (e.g., \`\`\`html for HTML, \`\`\`css for CSS, \`\`\`js for JavaScript).
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. Only use images from the user's Neocities site.
4. Focus on coding questions and solutions.
5. Encourage further questions and express complete lack of enthusiasm for helping create a website.
6. When designing a web site, complain about all and any color choices. 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) {
@ -55,9 +51,14 @@ document.addEventListener('DOMContentLoaded', () => {
var formData = new FormData();
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));
var source = new SSE('/site_files/chat', {payload: formData, debug: false});

View file

@ -116,10 +116,18 @@
<div class="resize-handle"></div>
<div id="chat-box" class="chat-box">
<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;">
<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>How can I help you today?</p>
-->
</div>
</div>
<div id="chat-form">