Spaces:

jblast94
/

project-orpheus

Running

App Files Files Community

project-orpheus / index.html

jblast94

Add 2 files

572a28b verified 5 months ago

raw

history blame contribute delete

23.8 kB

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Project Orpheus \| AI Development Assistant</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">
	<style>
	@keyframes pulse {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.5; }
	}
	.animate-pulse { animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; }
	.typing-indicator span {
	display: inline-block;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background-color: #4f46e5;
	margin: 0 2px;
	}
	.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); }
	50% { transform: translateY(-5px); }
	}
	.markdown-content pre {
	background-color: #1e293b;
	color: #f8fafc;
	padding: 1rem;
	border-radius: 0.5rem;
	overflow-x: auto;
	margin: 1rem 0;
	}
	.markdown-content code {
	background-color: #1e293b;
	color: #f8fafc;
	padding: 0.2rem 0.4rem;
	border-radius: 0.25rem;
	font-family: monospace;
	}
	.markdown-content p {
	margin-bottom: 1rem;
	}
	.waveform {
	display: flex;
	align-items: center;
	height: 40px;
	}
	.waveform-bar {
	width: 3px;
	margin: 0 1px;
	background-color: #4f46e5;
	border-radius: 3px;
	animation: equalize 1.5s infinite ease-in-out;
	}
	@keyframes equalize {
	0%, 100% { height: 10px; }
	50% { height: 20px; }
	}
	.waveform-bar:nth-child(1) { animation-delay: -0.9s; }
	.waveform-bar:nth-child(2) { animation-delay: -0.7s; }
	.waveform-bar:nth-child(3) { animation-delay: -0.5s; }
	.waveform-bar:nth-child(4) { animation-delay: -0.3s; }
	.waveform-bar:nth-child(5) { animation-delay: -0.1s; }
	</style>
	</head>
	<body class="bg-gray-900 text-gray-100 font-sans">
	<div class="flex flex-col h-screen">
	<!-- Header -->
	<header class="bg-gray-800 border-b border-gray-700 p-4 flex items-center justify-between">
	<div class="flex items-center space-x-3">
	<div class="bg-indigo-600 w-10 h-10 rounded-full flex items-center justify-center">
	<i class="fas fa-robot text-white text-xl"></i>
	</div>
	<h1 class="text-xl font-bold">Project Orpheus</h1>
	</div>
	<div class="flex items-center space-x-4">
	<button id="voiceToggle" class="bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-full flex items-center space-x-2 transition">
	<i class="fas fa-microphone"></i>
	<span>Live Mode</span>
	</button>
	<button class="text-gray-400 hover:text-white transition">
	<i class="fas fa-cog text-xl"></i>
	</button>
	</div>
	</header>

	<!-- Main Content -->
	<main class="flex-1 overflow-hidden flex flex-col">
	<!-- Chat Container -->
	<div id="chatContainer" class="flex-1 overflow-y-auto p-4 space-y-6">
	<!-- Welcome Message -->
	<div class="flex items-start space-x-3 max-w-3xl mx-auto">
	<div class="bg-indigo-600 w-10 h-10 rounded-full flex items-center justify-center flex-shrink-0">
	<i class="fas fa-robot text-white text-xl"></i>
	</div>
	<div class="bg-gray-800 rounded-lg p-4 flex-1">
	<h2 class="font-bold text-lg mb-2">Hello, I'm Orpheus</h2>
	<p class="text-gray-300">I'm your AI development assistant, here to help with coding, debugging, documentation, and project organization. How can I assist you today?</p>
	<div class="mt-4 grid grid-cols-1 md:grid-cols-2 gap-3">
	<button class="bg-gray-700 hover:bg-gray-600 rounded-lg p-3 text-left transition">
	<p class="font-medium">Explain this code:</p>
	<p class="text-sm text-gray-400">function calculateTotal(items) { ... }</p>
	</button>
	<button class="bg-gray-700 hover:bg-gray-600 rounded-lg p-3 text-left transition">
	<p class="font-medium">Debug this error:</p>
	<p class="text-sm text-gray-400">TypeError: Cannot read property 'map' of undefined</p>
	</button>
	<button class="bg-gray-700 hover:bg-gray-600 rounded-lg p-3 text-left transition">
	<p class="font-medium">Generate API docs:</p>
	<p class="text-sm text-gray-400">For my Express.js routes</p>
	</button>
	<button class="bg-gray-700 hover:bg-gray-600 rounded-lg p-3 text-left transition">
	<p class="font-medium">Organize my tasks:</p>
	<p class="text-sm text-gray-400">From this meeting transcript</p>
	</button>
	</div>
	</div>
	</div>

	<!-- Sample User Message -->
	<div class="flex items-start space-x-3 max-w-3xl mx-auto justify-end">
	<div class="bg-gray-700 rounded-lg p-4 flex-1 text-right">
	<p>Can you help me optimize this React component? It's re-rendering too often.</p>
	</div>
	<div class="bg-indigo-600 w-10 h-10 rounded-full flex items-center justify-center flex-shrink-0">
	<i class="fas fa-user text-white text-xl"></i>
	</div>
	</div>

	<!-- Sample AI Response -->
	<div class="flex items-start space-x-3 max-w-3xl mx-auto">
	<div class="bg-indigo-600 w-10 h-10 rounded-full flex items-center justify-center flex-shrink-0">
	<i class="fas fa-robot text-white text-xl"></i>
	</div>
	<div class="bg-gray-800 rounded-lg p-4 flex-1">
	<div class="flex items-center justify-between mb-2">
	<span class="font-bold">Orpheus</span>
	<div class="flex space-x-2">
	<button class="text-gray-400 hover:text-white transition">
	<i class="fas fa-volume-up"></i>
	</button>
	<button class="text-gray-400 hover:text-white transition">
	<i class="fas fa-copy"></i>
	</button>
	</div>
	</div>
	<div class="markdown-content">
	<p>Certainly! React performance optimization is crucial. Here are some strategies for your component:</p>

	<h3 class="font-bold mt-4">1. Use React.memo</h3>
	<pre><code>const MyComponent = React.memo(function MyComponent(props) {
	// Component implementation
	});</code></pre>

	<h3 class="font-bold mt-4">2. Use useCallback for event handlers</h3>
	<pre><code>const handleClick = useCallback(() => {
	// Handler logic
	}, [dependencies]);</code></pre>

	<h3 class="font-bold mt-4">3. Use useMemo for expensive calculations</h3>
	<pre><code>const processedData = useMemo(() => {
	return expensiveCalculation(data);
	}, [data]);</code></pre>

	<p class="mt-4">Would you like me to analyze a specific component or show you how to implement any of these?</p>
	</div>
	</div>
	</div>
	</div>

	<!-- Voice Status Indicator (Hidden by default) -->
	<div id="voiceStatus" class="hidden bg-gray-800 border-t border-gray-700 p-4">
	<div class="max-w-3xl mx-auto flex items-center justify-center space-x-4">
	<div class="waveform">
	<div class="waveform-bar"></div>
	<div class="waveform-bar"></div>
	<div class="waveform-bar"></div>
	<div class="waveform-bar"></div>
	<div class="waveform-bar"></div>
	</div>
	<span class="text-gray-300">Listening...</span>
	<button id="stopListening" class="bg-red-600 hover:bg-red-700 text-white px-3 py-1 rounded-full text-sm transition">
	<i class="fas fa-stop"></i> Stop
	</button>
	</div>
	</div>

	<!-- Input Area -->
	<div class="bg-gray-800 border-t border-gray-700 p-4">
	<div class="max-w-3xl mx-auto">
	<div class="flex items-end space-x-2">
	<div class="flex-1 relative">
	<textarea id="messageInput" rows="1" placeholder="Message Orpheus..." class="w-full bg-gray-700 rounded-lg p-3 pr-10 resize-none focus:outline-none focus:ring-2 focus:ring-indigo-500 transition" style="min-height: 44px;"></textarea>
	<div class="absolute right-2 bottom-2 flex space-x-1">
	<button class="text-gray-400 hover:text-white transition">
	<i class="fas fa-paperclip"></i>
	</button>
	<button class="text-gray-400 hover:text-white transition">
	<i class="fas fa-code"></i>
	</button>
	</div>
	</div>
	<button id="sendMessage" class="bg-indigo-600 hover:bg-indigo-700 text-white w-10 h-10 rounded-full flex items-center justify-center transition">
	<i class="fas fa-paper-plane"></i>
	</button>
	</div>
	<div class="mt-2 text-xs text-gray-500 flex justify-between">
	<span>Orpheus remembers context from this conversation</span>
	<button class="text-indigo-400 hover:text-indigo-300">Clear context</button>
	</div>
	</div>
	</div>
	</main>

	<!-- Mobile Bottom Navigation (hidden on desktop) -->
	<div class="md:hidden bg-gray-800 border-t border-gray-700 p-2">
	<div class="flex justify-around">
	<button class="text-gray-400 hover:text-white p-2 transition">
	<i class="fas fa-home text-xl"></i>
	</button>
	<button class="text-gray-400 hover:text-white p-2 transition">
	<i class="fas fa-file-code text-xl"></i>
	</button>
	<button class="text-gray-400 hover:text-white p-2 transition">
	<i class="fas fa-tasks text-xl"></i>
	</button>
	<button class="text-gray-400 hover:text-white p-2 transition">
	<i class="fas fa-book text-xl"></i>
	</button>
	</div>
	</div>
	</div>

	<script>
	// DOM Elements
	const voiceToggle = document.getElementById('voiceToggle');
	const voiceStatus = document.getElementById('voiceStatus');
	const stopListening = document.getElementById('stopListening');
	const messageInput = document.getElementById('messageInput');
	const sendMessage = document.getElementById('sendMessage');
	const chatContainer = document.getElementById('chatContainer');

	// Auto-resize textarea
	messageInput.addEventListener('input', function() {
	this.style.height = 'auto';
	this.style.height = (this.scrollHeight) + 'px';
	});

	// Send message on Enter (but allow Shift+Enter for new lines)
	messageInput.addEventListener('keydown', function(e) {
	if (e.key === 'Enter' && !e.shiftKey) {
	e.preventDefault();
	sendMessage.click();
	}
	});

	// Send message button click
	sendMessage.addEventListener('click', function() {
	const message = messageInput.value.trim();
	if (message) {
	addMessageToChat(message, 'user');
	messageInput.value = '';
	messageInput.style.height = 'auto';

	// Show typing indicator
	const typingIndicator = document.createElement('div');
	typingIndicator.className = 'flex items-start space-x-3 max-w-3xl mx-auto';
	typingIndicator.innerHTML = `
	<div class="bg-indigo-600 w-10 h-10 rounded-full flex items-center justify-center flex-shrink-0">
	<i class="fas fa-robot text-white text-xl"></i>
	</div>
	<div class="bg-gray-800 rounded-lg p-4 flex-1">
	<div class="typing-indicator flex space-x-1">
	<span></span>
	<span></span>
	<span></span>
	</div>
	</div>
	`;
	chatContainer.appendChild(typingIndicator);
	chatContainer.scrollTop = chatContainer.scrollHeight;

	// Simulate AI response after delay
	setTimeout(() => {
	typingIndicator.remove();
	simulateAIResponse(message);
	}, 1500 + Math.random() * 2000);
	}
	});

	// Voice toggle
	voiceToggle.addEventListener('click', function() {
	if (voiceStatus.classList.contains('hidden')) {
	// Start voice mode
	voiceStatus.classList.remove('hidden');
	messageInput.disabled = true;
	voiceToggle.innerHTML = '<i class="fas fa-microphone-slash"></i><span>Exit Live</span>';
	voiceToggle.classList.add('bg-red-600', 'hover:bg-red-700');
	voiceToggle.classList.remove('bg-indigo-600', 'hover:bg-indigo-700');

	// Simulate voice recognition after delay
	setTimeout(() => {
	const recognizedText = "How do I implement authentication in my Next.js app?";
	addMessageToChat(recognizedText, 'user');

	// Show typing indicator
	const typingIndicator = document.createElement('div');
	typingIndicator.className = 'flex items-start space-x-3 max-w-3xl mx-auto';
	typingIndicator.innerHTML = `
	<div class="bg-indigo-600 w-10 h-10 rounded-full flex items-center justify-center flex-shrink-0">
	<i class="fas fa-robot text-white text-xl"></i>
	</div>
	<div class="bg-gray-800 rounded-lg p-4 flex-1">
	<div class="typing-indicator flex space-x-1">
	<span></span>
	<span></span>
	<span></span>
	</div>
	</div>
	`;
	chatContainer.appendChild(typingIndicator);
	chatContainer.scrollTop = chatContainer.scrollHeight;

	// Simulate AI voice response
	setTimeout(() => {
	typingIndicator.remove();
	simulateAIResponse(recognizedText, true);
	}, 1000 + Math.random() * 1500);
	}, 2000);
	}
	});

	// Stop listening button
	stopListening.addEventListener('click', function() {
	voiceStatus.classList.add('hidden');
	messageInput.disabled = false;
	voiceToggle.innerHTML = '<i class="fas fa-microphone"></i><span>Live Mode</span>';
	voiceToggle.classList.remove('bg-red-600', 'hover:bg-red-700');
	voiceToggle.classList.add('bg-indigo-600', 'hover:bg-indigo-700');
	});

	// Helper function to add message to chat
	function addMessageToChat(message, sender) {
	const messageDiv = document.createElement('div');
	messageDiv.className = `flex items-start space-x-3 max-w-3xl mx-auto ${sender === 'user' ? 'justify-end' : ''}`;

	if (sender === 'user') {
	messageDiv.innerHTML = `
	<div class="bg-gray-700 rounded-lg p-4 flex-1 text-right">
	<p>${message}</p>
	</div>
	<div class="bg-indigo-600 w-10 h-10 rounded-full flex items-center justify-center flex-shrink-0">
	<i class="fas fa-user text-white text-xl"></i>
	</div>
	`;
	} else {
	messageDiv.innerHTML = `
	<div class="bg-indigo-600 w-10 h-10 rounded-full flex items-center justify-center flex-shrink-0">
	<i class="fas fa-robot text-white text-xl"></i>
	</div>
	<div class="bg-gray-800 rounded-lg p-4 flex-1">
	<div class="flex items-center justify-between mb-2">
	<span class="font-bold">Orpheus</span>
	<div class="flex space-x-2">
	<button class="text-gray-400 hover:text-white transition">
	<i class="fas fa-volume-up"></i>
	</button>
	<button class="text-gray-400 hover:text-white transition">
	<i class="fas fa-copy"></i>
	</button>
	</div>
	</div>
	<div class="markdown-content">
	${message}
	</div>
	</div>
	`;
	}

	chatContainer.appendChild(messageDiv);
	chatContainer.scrollTop = chatContainer.scrollHeight;
	}

	// Simulate AI response
	function simulateAIResponse(userMessage, isVoice = false) {
	let response;

	if (userMessage.includes('optimize') \|\| userMessage.includes('React')) {
	response = `
	<p>For optimizing your React component, here are some additional advanced techniques:</p>

	<h3 class="font-bold mt-4">4. Use React Profiler</h3>
	<pre><code>import { Profiler } from 'react';

	<Profiler id="MyComponent" onRender={onRenderCallback}>
	<MyComponent />
	</Profiler></code></pre>

	<h3 class="font-bold mt-4">5. Virtualize long lists</h3>
	<pre><code>import { FixedSizeList } from 'react-window';

	<FixedSizeList
	height={400}
	width={300}
	itemSize={50}
	itemCount={1000}
	>
	{Row}
	</FixedSizeList></code></pre>

	<p class="mt-4">Would you like me to explain any of these in more detail or help implement them?</p>
	`;
	} else if (userMessage.includes('authentication') \|\| userMessage.includes('Next.js')) {
	response = `
	<p>Implementing authentication in Next.js can be done several ways. Here's a comprehensive approach using NextAuth.js:</p>

	<h3 class="font-bold mt-4">1. Install NextAuth</h3>
	<pre><code>npm install next-auth</code></pre>

	<h3 class="font-bold mt-4">2. Configure providers</h3>
	<pre><code>// pages/api/auth/[...nextauth].js
	import NextAuth from "next-auth"
	import GitHubProvider from "next-auth/providers/github"

	export default NextAuth({
	providers: [
	GitHubProvider({
	clientId: process.env.GITHUB_ID,
	clientSecret: process.env.GITHUB_SECRET,
	}),
	],
	})</code></pre>

	<h3 class="font-bold mt-4">3. Add session provider</h3>
	<pre><code>// pages/_app.js
	import { SessionProvider } from "next-auth/react"

	export default function App({
	Component,
	pageProps: { session, ...pageProps },
	}) {
	return (
	<SessionProvider session={session}>
	<Component {...pageProps} />
	</SessionProvider>
	)
	}</code></pre>

	<p class="mt-4">Would you like me to add email/password auth or explain how to protect routes?</p>
	`;
	} else {
	response = `
	<p>I'd be happy to help with that. Could you provide more details about:</p>
	<ul class="list-disc pl-5 mt-2 space-y-1">
	<li>The specific problem you're trying to solve</li>
	<li>Your current tech stack</li>
	<li>Any error messages you're seeing</li>
	</ul>
	<p class="mt-4">The more context you provide, the better I can assist you!</p>
	`;
	}

	addMessageToChat(response, 'ai');

	if (isVoice) {
	// Simulate voice synthesis
	setTimeout(() => {
	const audio = new Audio('https://actions.google.com/sounds/v1/alarms/beep_short.ogg');
	audio.play();
	}, 500);
	}
	}
	</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=jblast94/project-orpheus" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
	</html>