Typewriter Talk

{"name":"Typewriter Talk","description":null,"photo":null,"view_count":3,"fork_count":0,"expires_at":null,"created_at":"2024-11-09T00:07:57.059461Z","updated_at":"2024-11-09T00:07:57.059463Z","user_id":60,"status":"PRIVATE","parent_id":null,"id":4500,"user":{"photo":null,"email":"jacob@jippity.pro","recess_id":"34481dd2-2bdf-14f9-99da-131de59dc90f","created_at":"2024-02-26T18:31:54.473216Z","reset_token":null,"stripe_customer_id":"cus_RPbovGjLueUufv","seats":100,"username":"2718281828459045","id":60,"password_hash":"$2b$12$ZpelZmCi5wEA/VuXSdOJXeylQ6vOUks0sfwQxIKdjwBAeamaWIMOW","updated_at":"2024-02-26T18:31:54.473218Z","reset_token_expiry":null,"subscription_status":"active"},"code":{"script.js":"// Global variable to store messages\nlet messages = [];\n\n// Global variable to store the current user input\nlet currentInput = \"\";\n\n// Variables for typing effect\nlet typewriterResponse = \"\";\n\nlet currentResponse = \"\";\n\nlet responseIndex = 0;\n\nlet isTyping = false;\n\n// Setup function to initialize the canvas\nfunction setup() {\n createCanvas(windowWidth, windowHeight);\n textSize(16);\n fill(0);\n noStroke();\n}\n\n// Draw function to handle drawing logic\nfunction draw() {\n background(240);\n let y = 20; // Starting y position for text\n\n // Display all messages\n messages.forEach(message => {\n text(message.text, 10, y);\n y += 20; // Move down for the next line\n });\n\n // Display the current input being typed\n if (!isTyping) {\n text(currentInput, 10, y);\n }\n\n // Handle typing effect for typewriter response\n if (isTyping) {\n if (responseIndex < typewriterResponse.length) {\n currentResponse += typewriterResponse.charAt(responseIndex);\n responseIndex++;\n } else {\n isTyping = false; // Stop typing when done\n messages.push({ type: 'typewriter', text: currentResponse });\n currentResponse = \"\";\n }\n text(currentResponse, 10, y);\n }\n}\n\n// Function to handle user input\nfunction handleUserInput() {\n const inputBox = document.getElementById('inputBox');\n const userMessage = inputBox.value.trim();\n if (userMessage) {\n // Add user message to messages array\n messages.push({ type: 'user', text: userMessage });\n\n // Clear the input box\n inputBox.value = '';\n\n // Add a default response from the typewriter\n const typewriterResponse = \"This is a typewriter response.\";\n messages.push({ type: 'typewriter', text: typewriterResponse });\n\n // Update the display\n updateDisplay();\n }\n}\n\n// Function to update the display on the \"paper\"\nfunction updateDisplay() {\n const paper = document.getElementById('paper');\n paper.innerHTML = ''; // Clear the paper\n\n // Display the current input\n const messageElement = document.createElement('div');\n messageElement.className = 'message';\n messageElement.innerText = currentInput;\n paper.appendChild(messageElement);\n}\n\n// Function to handle key presses for typing\nfunction keyTyped() {\n // Ignore 'Enter' key presses\n if (key === 'Enter') {\n return;\n }\n\n // Add the typed character to the current input\n currentInput += key;\n}\n\n// Function to handle key pressed events\nfunction keyPressed() {\n // Disable backspace key\n if (keyCode === BACKSPACE) {\n return false;\n }\n\n // Handle 'Enter' key press to send the message\n if (keyCode === ENTER && !isTyping) {\n // Add the current input to messages array as a user message\n messages.push({ type: 'user', text: currentInput });\n\n // Prepare a default response from the typewriter\n typewriterResponse = \"This is a typewriter response.\";\n isTyping = true;\n responseIndex = 0;\n\n // Clear the current input for new typing\n currentInput = '';\n }\n}\n\n","style.css":"body { margin: 0; font-family: 'Courier New', Courier, monospace; background-color: #f0f0f0; }\n\n#paper { width: 80%; height: auto; max-height: 90vh; background: white; border: 1px solid #ccc; padding: 20px; overflow-y: auto; position: relative; margin: 0 auto; }\n\n#inputBox { width: 100%; padding: 10px; border: 1px solid #ccc; margin-top: 10px; }\n\n.message { margin: 5px 0; }","index.html":"\n\n\n\n \n \n Typewriter Talk\n \n \n \n\n\n\n\n"},"chat_history":[{"deleted":0,"code_id":181582,"input_tokens":null,"id":88912,"project_id":4500,"sender":"human","message":"ok great. now I want to use a free AI like llama to generate responses, help me do that","created_at":"2024-11-09T00:15:27.764867Z","output_tokens":null},{"deleted":0,"code_id":181582,"input_tokens":null,"id":88913,"project_id":4500,"sender":"ai","message":"Using a free AI like Llama to generate responses would require server-side processing, which isn't possible in your current setup since we're focused on client-side technologies like HTML, CSS, and JavaScript with p5.js. However, you can simulate this by creating a set of pre-defined responses in your JavaScript code.\n\nIf you're interested in simulating an AI response, you could create a function that selects a random response from a list whenever a user inputs a message. Would you like to add such a feature? If so, what kind of responses would you like to include?","created_at":"2024-11-09T00:15:27.773070Z","output_tokens":null}],"assets":[],"messages_sent":8,"comments":[],"steps":[]}