MagicAI API Landing Page

{"name":"MagicAI Contact Form","description":"Create a visually appealing landing page with a contact form for the MagicAI API, featuring a modern UI and interactive animations.","photo":null,"view_count":3,"fork_count":0,"expires_at":null,"created_at":"2024-04-27T03:14:29.967002Z","updated_at":"2024-04-27T03:14:29.967002Z","user_id":2,"status":"PRIVATE","parent_id":null,"id":1281,"user":{"username":"gamerc0der","id":2,"password_hash":null,"updated_at":"2023-12-11T22:13:50.357943Z","reset_token_expiry":null,"subscription_status":null,"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},"code":{"script.js":"document.getElementById(\"chatbotSendBtn\").addEventListener(\"click\", function() {\r\n var userMessage = document.getElementById(\"chatbotInput\").value;\r\n if (userMessage.trim() !== \"\") {\r\n // Use a different CORS proxy for development purposes\r\n var corsProxy = \"https://cors-anywhere.herokuapp.com/\";\r\n var apiUrl = `http://de2.bot-hosting.net:21697/ask/Llama-2-7b/${encodeURIComponent(userMessage)}`;\r\n var proxyUrl = corsProxy + apiUrl;\r\n\r\n fetch(proxyUrl, {\r\n method: 'GET',\r\n headers: {\r\n 'X-Requested-With': 'XMLHttpRequest',\r\n 'Content-Type': 'application/json',\r\n }\r\n })\r\n .then(response => {\r\n if (response.ok) {\r\n return response.json();\r\n }\r\n throw new Error('Network response was not ok.');\r\n })\r\n .then(data => {\r\n var chatBody = document.getElementById(\"chatbotBody\");\r\n chatBody.innerHTML = `

You: ${userMessage}

MagicAI: ${data.response ? data.response : 'Sorry, I didn\\'t get that.'}

`;\r\n document.getElementById(\"chatbotInput\").value = \"\";\r\n })\r\n .catch(error => console.error('Error:', error));\r\n }\r\n});\r\n","style.css":"#header {\r\n text-align: center;\r\n padding: 20px;\r\n background-color: transparent;\r\n color: #7f00ff;\r\n font-family: 'Arial', sans-serif;\r\n}\r\n\r\n#contactMessage {\r\n text-align: center;\r\n margin-top: 20px;\r\n font-family: 'Arial', sans-serif;\r\n font-size: 18px;\r\n color: #4A4A4A;\r\n /* Darker text for better readability */\r\n}\r\n\r\n#contactMessage a {\r\n color: #7f00ff;\r\n /* Magic purple to match the header */\r\n text-decoration: none;\r\n /* Removes underline from links */\r\n}\r\n\r\n#contactMessage a:hover {\r\n text-decoration: underline;\r\n /* Underline on hover for a visual cue */\r\n color: #ff007f;\r\n /* Changes color on hover for interaction feedback */\r\n}\r\n\r\n.star {\r\n position: absolute;\r\n background-color: white;\r\n border-radius: 50%;\r\n animation: twinkle linear infinite;\r\n}\r\n\r\n@keyframes twinkle {\r\n\r\n 0%,\r\n 100% {\r\n opacity: 0;\r\n }\r\n\r\n 50% {\r\n opacity: 1;\r\n }\r\n}\r\n\r\nbody {\r\n transition: background-color 2s;\r\n /* Smooth transition for background color change */\r\n}\r\n\r\n.color1 {\r\n background-color: #0D1B2A;\r\n}\r\n\r\n.color2 {\r\n background-color: #1B263B;\r\n}\r\n\r\n.color3 {\r\n background-color: #415A77;\r\n}\r\n\r\n.color4 {\r\n background-color: #778DA9;\r\n}\r\n\r\n/* Chatbot UI Styles */\r\n#chatbotContainer {\r\n width: 300px;\r\n position: fixed;\r\n bottom: 20px;\r\n right: 20px;\r\n background-color: #f0f0f0;\r\n border-radius: 10px;\r\n box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);\r\n font-family: 'Arial', sans-serif;\r\n}\r\n\r\n#chatbotHeader {\r\n background-color: #7f00ff;\r\n color: white;\r\n padding: 10px;\r\n text-align: center;\r\n border-top-left-radius: 10px;\r\n border-top-right-radius: 10px;\r\n}\r\n\r\n#chatbotBody {\r\n height: 100px;\r\n overflow-y: auto;\r\n padding: 10px;\r\n background-color: white;\r\n display: flex;\r\n justify-content: flex-start;\r\n align-items: center;\r\n text-align: left;\r\n}\r\n\r\n#chatbotInput, #chatbotSendBtn {\r\n width: 100%;\r\n padding: 10px;\r\n border: none;\r\n margin-top: 10px;\r\n}\r\n\r\n#chatbotSendBtn {\r\n background-color: #7f00ff;\r\n color: white;\r\n cursor: pointer;\r\n}\r\n\r\n#chatbotSendBtn:hover {\r\n background-color: #ff007f;\r\n}","index.html":"\n\n\n\n \n \n MagicAI API Landing Page\n \n\n\n\n \n

Message us by DMing Username: gamerc0der for\n more details.

\n \n

Chat with MagicAI Demo

\n \n \n

\n \n \n\n\n"},"chat_history":[{"deleted":0,"code_id":71836,"input_tokens":null,"id":38605,"project_id":1281,"sender":"human","message":"use free cors","created_at":"2024-04-27T03:31:42.805955Z","output_tokens":null},{"deleted":0,"code_id":71836,"input_tokens":null,"id":38606,"project_id":1281,"sender":"ai","message":"```javascript\ndocument.getElementById(\"chatbotSendBtn\").addEventListener(\"click\", function() {\n var userMessage = document.getElementById(\"chatbotInput\").value;\n if (userMessage.trim() !== \"\") {\n // Use a different CORS proxy for development purposes\n var corsProxy = \"https://cors-anywhere.herokuapp.com/\";\n var apiUrl = `http://de2.bot-hosting.net:21697/ask/Llama-2-7b/${encodeURIComponent(userMessage)}`;\n var proxyUrl = corsProxy + apiUrl;\n\n fetch(proxyUrl, {\n method: 'GET',\n headers: {\n 'X-Requested-With': 'XMLHttpRequest',\n 'Content-Type': 'application/json',\n }\n })\n .then(response => {\n if (response.ok) {\n return response.json();\n }\n throw new Error('Network response was not ok.');\n })\n .then(data => {\n var chatBody = document.getElementById(\"chatbotBody\");\n chatBody.innerHTML = `

You: ${userMessage}

MagicAI: ${data.response ? data.response : 'Sorry, I didn\\'t get that.'}

`;\n document.getElementById(\"chatbotInput\").value = \"\";\n })\n .catch(error => console.error('Error:', error));\n }\n});\n```\n\n- Changed the CORS proxy to \"https://cors-anywhere.herokuapp.com/\" to address potential issues with the previous proxy.\n- This proxy is a popular solution for bypassing the same-origin policy in browsers during development.\n- The rest of the code remains the same, focusing on sending the user's message to the API and handling the response.","created_at":"2024-04-27T03:31:42.813516Z","output_tokens":null},{"deleted":0,"code_id":71838,"input_tokens":null,"id":38607,"project_id":1281,"sender":"human","message":"api keys are generated using 3 numbers, 1 captial letter, 2 lower case letters, 1 symbol, 1 emoji, 2 captial letters\nsend an api key like that","created_at":"2024-04-27T03:35:58.449412Z","output_tokens":null},{"deleted":0,"code_id":71838,"input_tokens":null,"id":38608,"project_id":1281,"sender":"ai","message":"```javascript\nfunction generateAPIKey() {\n const numbers = '0123456789';\n const upperCaseLetters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';\n const lowerCaseLetters = 'abcdefghijklmnopqrstuvwxyz';\n const symbols = '!@#$%^&*()_+=-{}[]:\";\\'<>?,./';\n const emojis = ['😀', '😁', '😂', '🤣', '😃', '😄', '😅', '😆', '😉', '😊', '😋', '😎', '😍', '😘', '🥰', '😗', '😙', '😚', '🙂', '🤗'];\n\n // Randomly selecting characters for each part of the API Key\n const randomNumber = Array.from({length: 3}, () => numbers[Math.floor(Math.random() * numbers.length)]).join('');\n const randomUpperCaseLetter = upperCaseLetters[Math.floor(Math.random() * upperCaseLetters.length)];\n const randomLowerCaseLetters = Array.from({length: 2}, () => lowerCaseLetters[Math.floor(Math.random() * lowerCaseLetters.length)]).join('');\n const randomSymbol = symbols[Math.floor(Math.random() * symbols.length)];\n const randomEmoji = emojis[Math.floor(Math.random() * emojis.length)];\n const randomUpperCaseLetters = Array.from({length: 2}, () => upperCaseLetters[Math.floor(Math.random() * upperCaseLetters.length)]).join('');\n\n // Combining all parts to form the API Key\n const apiKey = `${randomNumber}${randomUpperCaseLetter}${randomLowerCaseLetters}${randomSymbol}${randomEmoji}${randomUpperCaseLetters}`;\n return apiKey;\n}\n\ndocument.getElementById(\"generateApiKeyBtn\").addEventListener(\"click\", function() {\n const apiKey = generateAPIKey();\n document.getElementById(\"apiKeyDisplay\").innerText = apiKey;\n});\n```\n\n- This function, `generateAPIKey`, generates a string that adheres to the specified format of 3 numbers, 1 uppercase letter, 2 lowercase letters, 1 symbol, 1 emoji, and 2 uppercase letters.\n- It randomly selects characters from predefined strings and arrays for each required type of character. For emojis, it selects from a predefined array of emoji characters.\n- The `addEventListener` function listens for click events on a button with the ID `generateApiKeyBtn`, generates the API key using the `generateAPIKey` function, and displays it in an element with the ID `apiKeyDisplay`.","created_at":"2024-04-27T03:35:58.466338Z","output_tokens":null}],"assets":[],"messages_sent":30,"comments":[],"steps":[{"title":"Interactive Animations","step_number":0,"complete":false,"updated_at":"2024-04-27T03:14:29.972893","id":6784,"instruction":"Add modern and interactive animations to the landing page to enhance user experience.","created_at":"2024-04-27T03:14:29.972892","project_id":1281},{"title":"Clean and User-Friendly UI","step_number":1,"complete":false,"updated_at":"2024-04-27T03:14:29.972963","id":6785,"instruction":"Design a visually appealing and easy-to-use interface for the landing page and contact form.","created_at":"2024-04-27T03:14:29.972962","project_id":1281},{"title":"Contact Form with Validation","step_number":2,"complete":false,"updated_at":"2024-04-27T03:14:29.973004","id":6786,"instruction":"Implement a contact form with input validation to ensure accurate user submissions.","created_at":"2024-04-27T03:14:29.973003","project_id":1281},{"title":"Responsive Design","step_number":3,"complete":false,"updated_at":"2024-04-27T03:14:29.973042","id":6787,"instruction":"Ensure the landing page and contact form are fully responsive and compatible with various devices and screen sizes.","created_at":"2024-04-27T03:14:29.973042","project_id":1281},{"title":"Submission Confirmation","step_number":4,"complete":false,"updated_at":"2024-04-27T03:14:29.973080","id":6788,"instruction":"Provide users with a confirmation message after submitting the contact form for a positive user experience.","created_at":"2024-04-27T03:14:29.973080","project_id":1281},{"title":"Backend Integration","step_number":5,"complete":false,"updated_at":"2024-04-27T03:14:29.973118","id":6789,"instruction":"Connect the contact form to backend services to handle user inquiries and submissions.","created_at":"2024-04-27T03:14:29.973118","project_id":1281},{"title":"Error Handling","step_number":6,"complete":false,"updated_at":"2024-04-27T03:14:29.973155","id":6790,"instruction":"Implement error handling for the contact form to guide users in case of input errors or submission failures.","created_at":"2024-04-27T03:14:29.973154","project_id":1281},{"title":"Accessibility Features","step_number":7,"complete":false,"updated_at":"2024-04-27T03:14:29.973191","id":6791,"instruction":"Incorporate accessibility features to ensure the landing page and contact form are usable by all individuals, including those with disabilities.","created_at":"2024-04-27T03:14:29.973191","project_id":1281}]}

SmartAI Chatty API