Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>ChatGPT Clone - Next.js</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <script src="https://unpkg.com/react@18/umd/react.development.js"></script> | |
| <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script> | |
| <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script> | |
| <style> | |
| /* Next.js-like styles */ | |
| :root { | |
| --nextui-colors-primary: #10a37f; | |
| --nextui-colors-background: #ffffff; | |
| } | |
| body { | |
| font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; | |
| background-color: var(--nextui-colors-background); | |
| margin: 0; | |
| padding: 0; | |
| } | |
| /* Custom scrollbar */ | |
| ::-webkit-scrollbar { | |
| width: 6px; | |
| } | |
| ::-webkit-scrollbar-track { | |
| background: #f1f1f1; | |
| } | |
| ::-webkit-scrollbar-thumb { | |
| background: #888; | |
| border-radius: 3px; | |
| } | |
| ::-webkit-scrollbar-thumb:hover { | |
| background: #555; | |
| } | |
| /* Animation */ | |
| @keyframes fadeIn { | |
| from { opacity: 0; transform: translateY(10px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| .animate-fade-in { | |
| animation: fadeIn 0.3s ease-out; | |
| } | |
| /* Typing indicator */ | |
| .typing-indicator span { | |
| display: inline-block; | |
| width: 8px; | |
| height: 8px; | |
| border-radius: 50%; | |
| background: #6b7280; | |
| margin: 0 2px; | |
| opacity: 0.4; | |
| } | |
| .typing-indicator span:nth-child(1) { | |
| animation: bounce 1s infinite; | |
| } | |
| .typing-indicator span:nth-child(2) { | |
| animation: bounce 1s infinite 0.2s; | |
| } | |
| .typing-indicator span:nth-child(3) { | |
| animation: bounce 1s infinite 0.4s; | |
| } | |
| @keyframes bounce { | |
| 0%, 100% { transform: translateY(0); opacity: 0.4; } | |
| 50% { transform: translateY(-5px); opacity: 1; } | |
| } | |
| /* Markdown-like styles */ | |
| .message-content pre { | |
| background-color: #f6f8fa; | |
| border-radius: 6px; | |
| padding: 16px; | |
| overflow-x: auto; | |
| margin: 8px 0; | |
| font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace; | |
| font-size: 14px; | |
| } | |
| .message-content code { | |
| background-color: rgba(175,184,193,0.2); | |
| border-radius: 6px; | |
| padding: 0.2em 0.4em; | |
| font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace; | |
| font-size: 85%; | |
| } | |
| .message-content p { | |
| margin-bottom: 12px; | |
| } | |
| .message-content ul, .message-content ol { | |
| margin-bottom: 12px; | |
| padding-left: 24px; | |
| } | |
| .message-content li { | |
| margin-bottom: 4px; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="root"></div> | |
| <script type="text/babel"> | |
| const { useState, useEffect, useRef } = React; | |
| function ChatGPTApp() { | |
| const [messages, setMessages] = useState([ | |
| { | |
| id: '1', | |
| role: 'assistant', | |
| content: 'Hello! I\'m ChatGPT. How can I help you today?', | |
| suggestions: [ | |
| 'Explain quantum computing', | |
| 'Write a poem about AI', | |
| 'Suggest team building activities', | |
| 'Help me debug this code' | |
| ] | |
| } | |
| ]); | |
| const [input, setInput] = useState(''); | |
| const [isTyping, setIsTyping] = useState(false); | |
| const chatContainerRef = useRef(null); | |
| const inputRef = useRef(null); | |
| // Auto-focus input on load | |
| useEffect(() => { | |
| if (inputRef.current) { | |
| inputRef.current.focus(); | |
| } | |
| }, []); | |
| // Auto-scroll to bottom when messages change | |
| useEffect(() => { | |
| if (chatContainerRef.current) { | |
| chatContainerRef.current.scrollTop = chatContainerRef.current.scrollHeight; | |
| } | |
| }, [messages]); | |
| const handleSubmit = (e) => { | |
| e.preventDefault(); | |
| if (!input.trim()) return; | |
| // Add user message | |
| const userMessage = { | |
| id: Date.now().toString(), | |
| role: 'user', | |
| content: input | |
| }; | |
| setMessages(prev => [...prev, userMessage]); | |
| setInput(''); | |
| setIsTyping(true); | |
| // Simulate AI response after delay | |
| setTimeout(() => { | |
| const aiResponse = generateAIResponse(input); | |
| setMessages(prev => [...prev, aiResponse]); | |
| setIsTyping(false); | |
| }, 1500); | |
| }; | |
| const handleSuggestionClick = (suggestion) => { | |
| setInput(suggestion); | |
| if (inputRef.current) { | |
| inputRef.current.focus(); | |
| } | |
| }; | |
| const generateAIResponse = (userMessage) => { | |
| const lowerMessage = userMessage.toLowerCase(); | |
| if (lowerMessage.includes("quantum computing")) { | |
| return { | |
| id: Date.now().toString() + '-ai', | |
| role: 'assistant', | |
| content: `Quantum computing is an area of computing focused on developing computer technology based on the principles of quantum theory, which explains the behavior of energy and material on the atomic and subatomic levels. | |
| **Key concepts:** | |
| - Qubits: Unlike classical bits (0 or 1), qubits can exist in superposition (both 0 and 1 simultaneously) | |
| - Entanglement: Qubits can be entangled, meaning the state of one affects another | |
| - Quantum gates: Operations that manipulate qubits | |
| - Quantum supremacy: When a quantum computer outperforms classical computers | |
| Potential applications include: | |
| - Drug discovery | |
| - Cryptography | |
| - Optimization problems | |
| - Financial modeling` | |
| }; | |
| } else if (lowerMessage.includes("poem") && lowerMessage.includes("ai")) { | |
| return { | |
| id: Date.now().toString() + '-ai', | |
| role: 'assistant', | |
| content: `Here's a poem about AI: | |
| **The Mind of Silicon** | |
| In circuits deep and code so bright, | |
| An artificial mind takes flight. | |
| Not born of flesh, but built with care, | |
| To help and serve, to think and share. | |
| Though made of math and logic pure, | |
| Its potential is hard to ignore. | |
| A tool for good, if used with care, | |
| To make our future bright and fair. | |
| What wonders might we yet create, | |
| When human minds with AI mate? | |
| The future's path we cannot see, | |
| But walk it must, both you and me.` | |
| }; | |
| } else if (lowerMessage.includes("team building")) { | |
| return { | |
| id: Date.now().toString() + '-ai', | |
| role: 'assistant', | |
| content: `Here are some team building activity ideas: | |
| 1. **Escape room challenge** (virtual or in-person) | |
| - Great for problem-solving and collaboration | |
| 2. **Two truths and a lie** icebreaker | |
| - Helps team members get to know each other | |
| 3. **Scavenger hunt** | |
| - Can be themed around your company values | |
| 4. **Problem-solving puzzles** | |
| - Like the "marshmallow challenge" (build tallest structure with spaghetti and marshmallow) | |
| 5. **Volunteer activity together** | |
| - Builds camaraderie while giving back | |
| 6. **Office trivia competition** | |
| - Fun way to learn about each other | |
| 7. **Collaborative art project** | |
| - Each team member contributes to a shared artwork | |
| 8. **Cooking or baking challenge** | |
| - Teams work together to create a dish` | |
| }; | |
| } else if (lowerMessage.includes("debug")) { | |
| return { | |
| id: Date.now().toString() + '-ai', | |
| role: 'assistant', | |
| content: `I'd be happy to help you debug your code! | |
| To provide the best assistance, please share: | |
| 1. The programming language | |
| 2. The error message you're getting | |
| 3. What you expected to happen | |
| 4. What's actually happening | |
| 5. Relevant code snippet (formatted with \`\`\` for readability) | |
| For example: | |
| \`\`\`javascript | |
| function add(a, b) { | |
| return a + b; | |
| } | |
| console.log(add(2, '3')); // Outputs "23" instead of 5 | |
| \`\`\` | |
| I'll do my best to help identify and fix the issue!` | |
| }; | |
| } else if (lowerMessage.includes("hello") || lowerMessage.includes("hi")) { | |
| return { | |
| id: Date.now().toString() + '-ai', | |
| role: 'assistant', | |
| content: 'Hello there! How can I assist you today?', | |
| suggestions: [ | |
| 'Explain quantum computing', | |
| 'Write a poem about AI', | |
| 'Suggest team building activities', | |
| 'Help me debug this code' | |
| ] | |
| }; | |
| } else { | |
| return { | |
| id: Date.now().toString() + '-ai', | |
| role: 'assistant', | |
| content: 'I\'m an AI assistant designed to provide helpful and harmless responses. Could you clarify or expand on your question? I can help with a wide range of topics including:\n\n- Technology explanations\n- Creative writing\n- Problem solving\n- Learning new concepts\n- Code debugging\n\nWhat would you like to know more about?' | |
| }; | |
| } | |
| }; | |
| return ( | |
| <div className="flex flex-col h-screen"> | |
| {/* Header */} | |
| <header className="bg-white border-b border-gray-200 py-3 px-4 flex items-center justify-between"> | |
| <div className="flex items-center space-x-2"> | |
| <div className="w-8 h-8 rounded-full bg-green-500 flex items-center justify-center text-white font-bold">AI</div> | |
| <h1 className="text-lg font-semibold">ChatGPT</h1> | |
| </div> | |
| <div className="flex items-center space-x-4"> | |
| <button className="text-gray-500 hover:text-gray-700"> | |
| <i className="fas fa-sun"></i> | |
| </button> | |
| <button className="text-gray-500 hover:text-gray-700"> | |
| <i className="fas fa-cog"></i> | |
| </button> | |
| </div> | |
| </header> | |
| {/* Main chat area */} | |
| <main | |
| ref={chatContainerRef} | |
| className="flex-1 overflow-y-auto p-4 space-y-6 bg-gray-50" | |
| > | |
| {messages.map((message) => ( | |
| <div | |
| key={message.id} | |
| className={`max-w-3xl mx-auto animate-fade-in ${message.role === 'user' ? 'flex justify-end' : ''}`} | |
| > | |
| <div className={`flex space-x-3 ${message.role === 'user' ? 'flex-row-reverse' : ''}`}> | |
| {message.role === 'assistant' && ( | |
| <div className="flex-shrink-0"> | |
| <div className="w-8 h-8 rounded-full bg-green-500 flex items-center justify-center text-white font-bold">AI</div> | |
| </div> | |
| )} | |
| {message.role === 'user' && ( | |
| <div className="flex-shrink-0"> | |
| <div className="w-8 h-8 rounded-full bg-gray-700 flex items-center justify-center text-white font-bold">Y</div> | |
| </div> | |
| )} | |
| <div className={`p-4 rounded-lg ${message.role === 'user' ? 'bg-green-500 text-white' : 'bg-white border border-gray-200'}`}> | |
| <div className="message-content"> | |
| {message.content.split('\n').map((paragraph, i) => ( | |
| <p key={i}>{paragraph}</p> | |
| ))} | |
| </div> | |
| {message.suggestions && ( | |
| <div className="mt-3 grid grid-cols-2 gap-2"> | |
| {message.suggestions.map((suggestion, i) => ( | |
| <button | |
| key={i} | |
| onClick={() => handleSuggestionClick(suggestion)} | |
| className="bg-gray-100 hover:bg-gray-200 text-gray-800 py-2 px-3 rounded text-sm text-left" | |
| > | |
| {suggestion} | |
| </button> | |
| ))} | |
| </div> | |
| )} | |
| </div> | |
| </div> | |
| </div> | |
| ))} | |
| {isTyping && ( | |
| <div className="max-w-3xl mx-auto animate-fade-in"> | |
| <div className="flex space-x-3"> | |
| <div className="flex-shrink-0"> | |
| <div className="w-8 h-8 rounded-full bg-green-500 flex items-center justify-center text-white font-bold">AI</div> | |
| </div> | |
| <div className="bg-white p-4 rounded-lg shadow-sm border border-gray-200 w-20"> | |
| <div className="typing-indicator flex justify-center space-x-1"> | |
| <span></span> | |
| <span></span> | |
| <span></span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| )} | |
| </main> | |
| {/* Input area */} | |
| <div className="bg-white border-t border-gray-200 p-4"> | |
| <form | |
| onSubmit={handleSubmit} | |
| className="max-w-3xl mx-auto relative" | |
| > | |
| <div className="relative"> | |
| <textarea | |
| ref={inputRef} | |
| value={input} | |
| onChange={(e) => setInput(e.target.value)} | |
| rows="1" | |
| placeholder="Message ChatGPT..." | |
| className="w-full p-4 pr-12 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-green-500 focus:border-transparent resize-none" | |
| style={{ minHeight: '60px', maxHeight: '200px' }} | |
| onKeyDown={(e) => { | |
| if (e.key === 'Enter' && !e.shiftKey) { | |
| e.preventDefault(); | |
| handleSubmit(e); | |
| } | |
| }} | |
| /> | |
| <button | |
| type="submit" | |
| disabled={!input.trim()} | |
| className="absolute right-3 bottom-3 w-8 h-8 rounded-md bg-green-500 text-white flex items-center justify-center hover:bg-green-600 disabled:bg-gray-400 disabled:cursor-not-allowed" | |
| > | |
| <i className="fas fa-paper-plane"></i> | |
| </button> | |
| </div> | |
| <p className="text-xs text-gray-500 mt-2 text-center"> | |
| ChatGPT can make mistakes. Consider checking important information. | |
| </p> | |
| </form> | |
| </div> | |
| </div> | |
| ); | |
| } | |
| ReactDOM.render(<ChatGPTApp />, document.getElementById('root')); | |
| </script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=ahmadsultan1/chatgpt-clone" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |