Spaces:

Fasdxoox
/

deepsite-project

Running

App Files Files Community

Fasdxoox commited on Oct 1

Commit

1c09734

verified ·

1 Parent(s): 940afc8

اريد بأن تقوم بإنشاء موقع ويب يعمل على الوضائف التاليه:

Browse files

1. يوفر واجهه تمكنني من إدخال OpenAI API Keys وربط الموقع بحسابي على جتهب
2. ينتقل إلى واجهه يطلب فيها تحديد مستودع جتهب الذي اريد ان اعمل عليه (من المستودعات التي بالحساب الذي قمت بربطه بالموقع)
3. ينتقل إلى خانه المحادثه مع نموذج الذكاء الاصطناعي ويقوم بانشاء سحب جديد على المستودع الذي حددته و بحيث عندما اكتب اي امر يقوم نموذج الذكاء الاصطناعي بتنفيذه على المستودع الذي حددته مسبقا

4. عندما اريد الانتهاء من التعديلات اضغط على زر الدمج وبعدها يتم دمج جميع التغيرات على المستودع الذي حددته مسبقا

الفكره مشابهه لموقع cursor (واجهه الهاتف المحمول)

Files changed (1) hide show

index.html +247 -18

index.html CHANGED Viewed

@@ -1,19 +1,248 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
 </html>

+<!DOCTYPE html>
+<html lang="ar" dir="rtl">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>GitHub AI Assistant</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body class="bg-gray-50 min-h-screen">
+    <div id="app" class="container mx-auto px-4 py-8">
+        <!-- Setup Page -->
+        <div id="setup-page" class="max-w-md mx-auto bg-white rounded-xl shadow-md overflow-hidden p-6">
+            <div class="text-center mb-8">
+                <h1 class="text-2xl font-bold text-gray-800 mb-2">GitHub AI Assistant</h1>
+                <p class="text-gray-600">أدخل بيانات الاعتماد الخاصة بك للبدء</p>
+            </div>
+            <form id="setup-form" class="space-y-4">
+                <div>
+                    <label for="openai-key" class="block text-sm font-medium text-gray-700 mb-1">OpenAI API Key</label>
+                    <input type="password" id="openai-key" required
+                           class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
+                </div>
+                <div>
+                    <label for="github-token" class="block text-sm font-medium text-gray-700 mb-1">GitHub Token</label>
+                    <input type="password" id="github-token" required
+                           class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
+                </div>
+                <button type="submit"
+                        class="w-full bg-blue-600 text-white py-2 px-4 rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 transition duration-200">
+                    الاتصال والاستمرار
+                </button>
+            </form>
+        </div>
+        <!-- Repository Selection Page -->
+        <div id="repo-page" class="hidden max-w-2xl mx-auto bg-white rounded-xl shadow-md overflow-hidden p-6">
+            <div class="text-center mb-8">
+                <h1 class="text-2xl font-bold text-gray-800 mb-2">اختر المستودع</h1>
+                <p class="text-gray-600">اختر المستودع الذي تريد العمل عليه</p>
+            </div>
+            <div id="repo-list" class="space-y-3 mb-6 max-h-96 overflow-y-auto">
+                <!-- Repositories will be loaded here -->
+            </div>
+            <button id="back-to-setup"
+                    class="w-full bg-gray-500 text-white py-2 px-4 rounded-md hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-gray-500 transition duration-200">
+                العودة إلى الإعدادات
+            </button>
+        </div>
+        <!-- Chat Page -->
+        <div id="chat-page" class="hidden h-screen flex flex-col bg-white rounded-xl shadow-md overflow-hidden">
+            <div class="flex items-center justify-between p-4 border-b bg-gray-50">
+                <div class="flex items-center space-x-2">
+                    <button id="back-to-repo" class="text-gray-600 hover:text-gray-800">
+                        <i data-feather="arrow-right"></i>
+                    </button>
+                    <h2 id="current-repo" class="text-lg font-semibold text-gray-800">المستودع المحدد</h2>
+                </div>
+                <button id="merge-btn"
+                        class="bg-green-600 text-white px-4 py-2 rounded-md hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-green-500 transition duration-200 hidden">
+                    دمج التغييرات
+                </button>
+            </div>
+            <div id="chat-messages" class="flex-1 overflow-y-auto p-4 space-y-4">
+                <!-- Chat messages will appear here -->
+            </div>
+            <div class="border-t p-4 bg-gray-50">
+                <form id="chat-form" class="flex space-x-2">
+                    <input type="text" id="message-input"
+                           placeholder="اكتب أمرك هنا..."
+                           class="flex-1 px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
+                    <button type="submit"
+                            class="bg-blue-600 text-white px-4 py-2 rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 transition duration-200">
+                        إرسال
+                    </button>
+                </form>
+            </div>
+        </div>
+    </div>
+    <script>
+        feather.replace();
+        // State management
+        let currentState = 'setup';
+        let selectedRepo = null;
+        let conversationHistory = [];
+        // DOM elements
+        const setupPage = document.getElementById('setup-page');
+        const repoPage = document.getElementById('repo-page');
+        const chatPage = document.getElementById('chat-page');
+        const setupForm = document.getElementById('setup-form');
+        const repoList = document.getElementById('repo-list');
+        const backToSetup = document.getElementById('back-to-setup');
+        const backToRepo = document.getElementById('back-to-repo');
+        const currentRepo = document.getElementById('current-repo');
+        const mergeBtn = document.getElementById('merge-btn');
+        const chatForm = document.getElementById('chat-form');
+        const messageInput = document.getElementById('message-input');
+        const chatMessages = document.getElementById('chat-messages');
+        // Page navigation
+        function showPage(page) {
+            setupPage.classList.add('hidden');
+            repoPage.classList.add('hidden');
+            chatPage.classList.add('hidden');
+            page.classList.remove('hidden');
+            currentState = page.id.split('-')[0];
+        }
+        // Setup form submission
+        setupForm.addEventListener('submit', async (e) => {
+            e.preventDefault();
+            const openaiKey = document.getElementById('openai-key').value;
+            const githubToken = document.getElementById('github-token').value;
+            // Store credentials (in a real app, use secure storage)
+            localStorage.setItem('openaiKey', openaiKey);
+            localStorage.setItem('githubToken', githubToken);
+            // Load repositories
+            await loadRepositories();
+            showPage(repoPage);
+        });
+        // Load GitHub repositories
+        async function loadRepositories() {
+            const token = localStorage.getItem('githubToken');
+            try {
+                const response = await fetch('https://api.github.com/user/repos', {
+                    headers: {
+                        'Authorization': `token ${token}`,
+                        'Accept': 'application/vnd.github.v3+json'
+                    }
+                });
+                if (!response.ok) throw new Error('Failed to fetch repositories');
+                const repos = await response.json();
+                displayRepositories(repos);
+            } catch (error) {
+                alert('خطأ في جلب المستودعات: ' + error.message);
+            }
+        }
+        // Display repositories
+        function displayRepositories(repos) {
+            repoList.innerHTML = '';
+            repos.forEach(repo => {
+                const repoElement = document.createElement('button');
+                repoElement.className = 'w-full text-right p-3 border border-gray-200 rounded-md hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-blue-500 transition duration-200';
+                repoElement.innerHTML = `
+                    <div class="font-medium text-gray-800">${repo.name}</div>
+                    <div class="text-sm text-gray-600">${repo.description || 'لا يوجد وصف'}</div>
+                `;
+                repoElement.addEventListener('click', () => {
+                    selectedRepo = repo;
+                    currentRepo.textContent = repo.name;
+                    showPage(chatPage);
+                    addMessage('system', 'مرحباً! أنا مساعد الذكاء الاصطناعي. كيف يمكنني مساعدتك في هذا المستودع؟');
+                });
+                repoList.appendChild(repoElement);
+            });
+        }
+        // Navigation buttons
+        backToSetup.addEventListener('click', () => showPage(setupPage));
+        backToRepo.addEventListener('click', () => showPage(repoPage));
+        // Chat functionality
+        function addMessage(sender, message) {
+            const messageDiv = document.createElement('div');
+            messageDiv.className = `p-3 rounded-lg max-w-[80%] ${
+                sender === 'user'
+                    ? 'bg-blue-100 text-blue-900 ml-auto'
+                    : 'bg-gray-100 text-gray-900 mr-auto'
+            }`;
+            messageDiv.textContent = message;
+            chatMessages.appendChild(messageDiv);
+            chatMessages.scrollTop = chatMessages.scrollHeight;
+            conversationHistory.push({ sender, message });
+        }
+        chatForm.addEventListener('submit', async (e) => {
+            e.preventDefault();
+            const message = messageInput.value.trim();
+            if (!message) return;
+            // Add user message
+            addMessage('user', message);
+            messageInput.value = '';
+            // Show merge button after first user message
+            mergeBtn.classList.remove('hidden');
+            // Simulate AI response (in a real app, this would call OpenAI API)
+            setTimeout(() => {
+                addMessage('ai', `تم معالجة أمرك "${message}" على المستودع ${selectedRepo.name}. سيتم تنفيذ التغييرات المطلوبة.`);
+            }, 1000);
+        });
+        // Merge functionality
+        mergeBtn.addEventListener('click', async () => {
+            if (!confirm('هل أنت متأكد أنك تريد دمج جميع التغييرات؟')) return;
+            // Simulate merge process
+            addMessage('system', 'جاري دمج التغييرات على المستودع...');
+            setTimeout(() => {
+                addMessage('system', '✅ تم دمج التغييرات بنجاح!');
+            }, 2000);
+        });
+        // Check for stored credentials on load
+        window.addEventListener('load', () => {
+            const storedOpenAIKey = localStorage.getItem('openaiKey');
+            const storedGitHubToken = localStorage.getItem('githubToken');
+            if (storedOpenAIKey && storedGitHubToken) {
+                document.getElementById('openai-key').value = storedOpenAIKey;
+                document.getElementById('github-token').value = storedGitHubToken;
+            }
+            feather.replace();
+        });
+    </script>
+</body>
 </html>