AI Coding Playground

{"name":"AI Coding Playground","description":"Embark on a whimsical journey into the world of AI coding! Engage with playful AI characters, customize their behaviors, and create unique AI interactions in this delightful and educational tool.","photo":null,"view_count":4,"fork_count":0,"expires_at":null,"created_at":"2024-03-30T00:18:30.274325Z","updated_at":"2024-03-30T00:18:30.274326Z","user_id":2,"status":"PRIVATE","parent_id":null,"id":970,"user":{"photo":null,"email":null,"recess_id":"a75a82d5-5ae6-41b7-d20f-788415be036d","created_at":"2023-12-11T22:13:50.357940Z","reset_token":null,"stripe_customer_id":null,"seats":null,"username":"gamerc0der","id":2,"password_hash":null,"updated_at":"2023-12-11T22:13:50.357943Z","reset_token_expiry":null,"subscription_status":null},"code":{"script.js":"document.addEventListener('DOMContentLoaded', function () {\n var editor = CodeMirror.fromTextArea(document.getElementById(\"code-editor\"), {\n lineNumbers: true,\n mode: \"htmlmixed\",\n theme: \"dracula\",\n });\n\n document.getElementById(\"run-code\").addEventListener(\"click\", function () {\n var code = editor.getValue();\n var iframe = document.createElement('iframe');\n var closeBtn = document.createElement('button'); // Create the close button\n\n iframe.style.width = '100%';\n iframe.style.height = '90%'; // Adjusted height to accommodate close button\n closeBtn.textContent = 'X'; // Set button text\n closeBtn.style.position = 'absolute';\n closeBtn.style.top = '0';\n closeBtn.style.right = '0';\n closeBtn.style.zIndex = '10';\n\n document.querySelector('.code-representation').innerHTML = ''; // Clear previous content\n document.querySelector('.code-representation').appendChild(closeBtn); // Add close button\n document.querySelector('.code-representation').appendChild(iframe); // Add the iframe\n\n var iframedoc = iframe.contentDocument || iframe.contentWindow.document;\n iframedoc.open();\n iframedoc.write(code);\n iframedoc.close();\n\n // Functionality to hide iframe on clicking the close button\n closeBtn.addEventListener('click', function () {\n document.querySelector('.code-representation').innerHTML = ''; // Clear the iframe and button\n });\n });\n});\nasync function sendMessageToAI(model, prompt) {\n const response = await fetch('https://reverse.mubi.tech/v1/chat/completions', {\n method: 'POST',\n headers: {\n 'Content-Type': 'application/json',\n 'Authorization': 'Bearer YOUR_API_KEY'\n },\n body: JSON.stringify({\n model: model,\n messages: [\n {\n \"role\": \"system\",\n \"content\": \"You are chatting to a Discord user. When generating images or chatting never ever use quotes. You are the /bounty solve command. You solve users bounties which may be make a chatgpt prompt for an rpg or write me 3 hello messages. If it asks you for an ai image prompt use a subject along with keywords separated by a comma. When asking for an ai image prompt only respond the prompt. Never send a message with quotes in it no matter if the user asks or you do it do not send quotes at all.\"\n },\n {\n \"role\": \"user\",\n \"content\": prompt\n }\n ]\n })\n });\n const data = await response.json();\n return data.choices[0].text.trim();\n}\ndocument.getElementById('send-message').addEventListener('click', async function() {\n const inputElement = document.getElementById('chat-input');\n const chatOutputElement = document.getElementById('chat-output');\n const message = inputElement.value;\n console.log(\"TEST\")\n if (message) {\n // Send the message to AI\n const aiResponse = await sendMessageToAI(message);\n con\n // Display the user's message\n chatOutputElement.innerHTML += '

You: ' + message + '

';\n\n // Display AI's response\n chatOutputElement.innerHTML += '

AI: ' + aiResponse + '

\n \n

\n \n \n

\n \n \n \n \n

\n\n

\n \n\n\n\n"},"chat_history":[{"message":"now code the left side to use ai via the chatgpt api but via a http post request ","project_id":970,"created_at":"2024-03-30T00:23:05.256235Z","output_tokens":null,"sender":"human","code_id":57901,"deleted":0,"input_tokens":null,"id":32040},{"message":"```javascript\nasync function sendMessageToAI(message) {\n const response = await fetch('https://api.openai.com/v4/completions', {\n method: 'POST',\n headers: {\n 'Content-Type': 'application/json',\n 'Authorization': 'Bearer YOUR_OPENAI_API_KEY'\n },\n body: JSON.stringify({\n model: 'text-davinci-002',\n prompt: message,\n temperature: 0.7,\n max_tokens: 150,\n top_p: 1.0,\n frequency_penalty: 0.0,\n presence_penalty: 0.0\n })\n });\n const data = await response.json();\n return data.choices[0].text.trim();\n}\n```\n\n- This function `sendMessageToAI` is designed to send a user's message to the GPT-3 API and return the AI's response.\n- It uses the `fetch` API to make a `POST` request to OpenAI's completions endpoint, sending along the necessary headers including the API key and the request body.\n- The function awaits the response from the API, parses the JSON content, and then extracts and returns the trimmed text from the AI's response. \n\nRemember to replace `'YOUR_OPENAI_API_KEY'` with your actual OpenAI API key.","project_id":970,"created_at":"2024-03-30T00:23:05.262430Z","output_tokens":null,"sender":"ai","code_id":57901,"deleted":0,"input_tokens":null,"id":32041},{"message":"make it work with th esend and all and use the model gpt-4 instead ","project_id":970,"created_at":"2024-03-30T00:23:55.007265Z","output_tokens":null,"sender":"human","code_id":57904,"deleted":0,"input_tokens":null,"id":32042},{"message":"You'll need to integrate the `sendMessageToAI` function with your chat interface and update it for GPT-4. Here’s how you can modify your `script.js` to make everything work together:\n\nFirst, update the `sendMessageToAI` function to use GPT-4:\n\n```javascript\nasync function sendMessageToAI(message) {\n const response = await fetch('https://api.openai.com/v4/completions', {\n method: 'POST',\n headers: {\n 'Content-Type': 'application/json',\n 'Authorization': 'Bearer YOUR_OPENAI_API_KEY'\n },\n body: JSON.stringify({\n model: 'text-davinci-004', // Updated to GPT-4 model\n prompt: message,\n temperature: 0.7,\n max_tokens: 150,\n top_p: 1.0,\n frequency_penalty: 0.0,\n presence_penalty: 0.0\n })\n });\n const data = await response.json();\n return data.choices[0].text.trim();\n}\n```\n\nNext, add the functionality to send a message when the \"Send\" button is clicked and display the response:\n\n```javascript\ndocument.getElementById('send-message').addEventListener('click', async function() {\n const inputElement = document.getElementById('chat-input');\n const chatOutputElement = document.getElementById('chat-output');\n const message = inputElement.value;\n\n if (message) {\n // Send the message to AI\n const aiResponse = await sendMessageToAI(message);\n\n // Display the user's message\n chatOutputElement.innerHTML += '

You: ' + message + '

';\n\n // Display AI's response\n chatOutputElement.innerHTML += '

AI: ' + aiResponse + '

';\n\n // Scroll to the bottom of the chat output\n chatOutputElement.scrollTop = chatOutputElement.scrollHeight;\n\n // Clear the input field\n inputElement.value = '';\n }\n});\n```\n\n- The `sendMessageToAI` function is now updated to use GPT-4, the latest model at the time of this writing.\n- The event listener for the \"Send\" button (`send-message`) gets the message from the input field (`chat-input`), sends it to the `sendMessageToAI` function, and then displays both the user's message and the AI's response in the chat output area (`chat-output`).\n- After displaying the messages, it automatically scrolls to the bottom of the chat output and clears the input field for the next message. \n\nRemember to replace `'YOUR_OPENAI_API_KEY'` with your actual OpenAI API key.","project_id":970,"created_at":"2024-03-30T00:23:55.014277Z","output_tokens":null,"sender":"ai","code_id":57904,"deleted":0,"input_tokens":null,"id":32043},{"message":"i send to https://reverse.mubi.tech/v1/chat/completions and this is the body {\n \"model\": \"[[ 0.model ]]\",\n \"messages\": [\n {\n \"role\": \"system\",\n \"content\": \"You are chatting to a Discord user. When generating images or chatting never ever use quotes. You are the /bounty solve command. You solve users bountys which may be make a chatgpt prompt for an rpg or write me 3 hello messages. If it asks you for a ai image prompt use a subject along with keywords seperated by a , When asking for an ai image prompt only respond the prompt. Never send a message with quotes in it no matter if the user asks or you do it do not send quotes at all.\"\n },\n {\n \"role\": \"user\",\n \"content\": \"[[ 0.prompt ]]\"\n }\n ]\n }","project_id":970,"created_at":"2024-03-30T00:24:39.380959Z","output_tokens":null,"sender":"human","code_id":57906,"deleted":0,"input_tokens":null,"id":32044},{"message":"To adapt the `sendMessageToAI` function for the new endpoint and request body structure, you need to modify the function as follows:\n\n```javascript\nasync function sendMessageToAI(model, prompt) {\n const response = await fetch('https://reverse.mubi.tech/v1/chat/completions', {\n method: 'POST',\n headers: {\n 'Content-Type': 'application/json',\n 'Authorization': 'Bearer YOUR_API_KEY'\n },\n body: JSON.stringify({\n model: model,\n messages: [\n {\n \"role\": \"system\",\n \"content\": \"You are chatting to a Discord user. When generating images or chatting never ever use quotes. You are the /bounty solve command. You solve users bounties which may be make a chatgpt prompt for an rpg or write me 3 hello messages. If it asks you for an ai image prompt use a subject along with keywords separated by a comma. When asking for an ai image prompt only respond the prompt. Never send a message with quotes in it no matter if the user asks or you do it do not send quotes at all.\"\n },\n {\n \"role\": \"user\",\n \"content\": prompt\n }\n ]\n })\n });\n const data = await response.json();\n return data.choices[0].text.trim();\n}\n```\n\n- The function now sends a POST request to the updated URL `https://reverse.mubi.tech/v1/chat/completions`.\n- The body of the request has been updated to match the new structure required by the endpoint. It includes a `model` parameter and a `messages` array with predefined roles and content.\n- The `model` parameter and the `prompt` are passed as arguments to the function, allowing for dynamic selection of the model and customization of the user's message.\n\nRemember to replace `'YOUR_API_KEY'` with your actual API key.","project_id":970,"created_at":"2024-03-30T00:24:39.387767Z","output_tokens":null,"sender":"ai","code_id":57906,"deleted":0,"input_tokens":null,"id":32045}],"assets":[],"messages_sent":12,"comments":[],"steps":[{"title":"Split-Screen Layout","instruction":"Step: Design a split-screen layout with an input interface on one side and a code representation on the other side.","created_at":"2024-03-30T00:18:30.281430","project_id":970,"complete":false,"step_number":0,"updated_at":"2024-03-30T00:18:30.281432","id":4923},{"title":"Visualize Whimsical AI Characters","instruction":"Step: Implement visually appealing AI characters with unique personalities and behaviors.","created_at":"2024-03-30T00:18:30.281494","project_id":970,"complete":false,"step_number":1,"updated_at":"2024-03-30T00:18:30.281495","id":4924},{"title":"User Input and Interaction","instruction":"Step: Enable user interaction with AI characters through a user-friendly interface.","created_at":"2024-03-30T00:18:30.281539","project_id":970,"complete":false,"step_number":2,"updated_at":"2024-03-30T00:18:30.281540","id":4925},{"title":"AI Behavior Customization","instruction":"Step: Allow users to customize and modify AI behaviors to create new interactions.","created_at":"2024-03-30T00:18:30.281581","project_id":970,"complete":false,"step_number":3,"updated_at":"2024-03-30T00:18:30.281581","id":4926},{"title":"Scoring System","instruction":"Step: Incorporate a scoring system to track user interactions and experiences with AI behaviors.","created_at":"2024-03-30T00:18:30.281645","project_id":970,"complete":false,"step_number":4,"updated_at":"2024-03-30T00:18:30.281646","id":4927},{"title":"AI Behavior Selection","instruction":"Step: Enable users to select and experience different AI behaviors in the playground.","created_at":"2024-03-30T00:18:30.281715","project_id":970,"complete":false,"step_number":5,"updated_at":"2024-03-30T00:18:30.281716","id":4928},{"title":"Game Logic Implementation","instruction":"Step: Implement game logic, including scoring, collision detection, timers, etc.","created_at":"2024-03-30T00:18:30.281788","project_id":970,"complete":false,"step_number":6,"updated_at":"2024-03-30T00:18:30.281789","id":4929}]}