Hugging Face's logo

Spaces:
NahFam13
/
not-cursor
Running

App Files Community
NahFam13 commited on
Commit
f86213b
·
verified ·
1 Parent(s): bff6af0

Add 2 files

Browse files
Files changed (2) hide show
  1. index.html +233 -58
  2. prompts.txt +1 -0
index.html CHANGED
@@ -54,6 +54,19 @@
54
  height: calc(100vh - 180px);
55
  overflow-y: auto;
56
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
57
  </style>
58
  </head>
59
  <body class="bg-gray-100 text-gray-800 h-screen flex flex-col">
@@ -100,7 +113,7 @@
100
  <i class="fas fa-ellipsis-h"></i>
101
  </button>
102
  </div>
103
- <div class="overflow-y-auto flex-1">
104
  <div class="project-item p-3 hover:bg-gray-100 cursor-pointer border-b flex items-center">
105
  <i class="fas fa-folder text-yellow-400 mr-3"></i>
106
  <div>
@@ -194,7 +207,7 @@
194
  <div class="flex-1 flex flex-col overflow-hidden">
195
  <!-- AI Chat Content (default visible) -->
196
  <div id="chatContent" class="flex-1 flex flex-col">
197
- <div class="chat-container p-4 space-y-4">
198
  <!-- AI Message -->
199
  <div class="flex">
200
  <div class="chat-message bg-blue-50 rounded-lg p-3">
@@ -302,7 +315,7 @@ Base = declarative_base()</pre>
302
  <button class="hover:text-blue-500">Select AI model</button>
303
  </div>
304
  <div>
305
- <span>Token count: 0/4000</span>
306
  </div>
307
  </div>
308
  </div>
@@ -420,7 +433,7 @@ DELETE /api/users/{id} - Delete user</pre>
420
  </div>
421
  </div>
422
  <div class="file-explorer p-2">
423
- <div class="space-y-1">
424
  <div class="file-item flex items-center p-1 hover:bg-gray-100 rounded cursor-pointer">
425
  <i class="fas fa-folder text-yellow-400 mr-2 w-4 text-center"></i>
426
  <span class="text-sm">fastapi_env</span>
@@ -478,7 +491,7 @@ DELETE /api/users/{id} - Delete user</pre>
478
  </div>
479
  </div>
480
  </div>
481
- <div class="terminal p-2 flex-1">
482
  <div class="text-green-400">$ <span class="text-white">python -m venv fastapi_env</span></div>
483
  <div class="text-green-400">$ <span class="text-white">source fastapi_env/bin/activate</span></div>
484
  <div class="text-white">(fastapi_env) $ <span class="text-white">pip install fastapi uvicorn sqlalchemy psycopg2-binary</span></div>
@@ -509,15 +522,15 @@ DELETE /api/users/{id} - Delete user</pre>
509
  <div class="p-4 space-y-4">
510
  <div>
511
  <label class="block text-sm font-medium text-gray-700 mb-1">Project Name</label>
512
- <input type="text" class="w-full border rounded-lg px-3 py-2" placeholder="My Awesome Project">
513
  </div>
514
  <div>
515
  <label class="block text-sm font-medium text-gray-700 mb-1">Project Description</label>
516
- <textarea class="w-full border rounded-lg px-3 py-2" rows="3" placeholder="Brief description of your project..."></textarea>
517
  </div>
518
  <div>
519
  <label class="block text-sm font-medium text-gray-700 mb-1">Project Type</label>
520
- <select class="w-full border rounded-lg px-3 py-2">
521
  <option>Python</option>
522
  <option>Node.js</option>
523
  <option>React</option>
@@ -528,8 +541,8 @@ DELETE /api/users/{id} - Delete user</pre>
528
  <div>
529
  <label class="block text-sm font-medium text-gray-700 mb-1">Project Location</label>
530
  <div class="flex">
531
- <input type="text" class="flex-1 border rounded-l-lg px-3 py-2" placeholder="/path/to/project">
532
- <button class="bg-gray-200 px-3 rounded-r-lg hover:bg-gray-300">
533
  <i class="fas fa-folder-open"></i>
534
  </button>
535
  </div>
@@ -583,6 +596,8 @@ DELETE /api/users/{id} - Delete user</pre>
583
  const newProjectModal = document.getElementById('newProjectModal');
584
  const cancelProjectBtn = document.getElementById('cancelProjectBtn');
585
  const confirmProjectBtn = document.getElementById('confirmProjectBtn');
 
 
586
 
587
  newProjectBtn.addEventListener('click', () => {
588
  newProjectModal.classList.remove('hidden');
@@ -592,22 +607,223 @@ DELETE /api/users/{id} - Delete user</pre>
592
  newProjectModal.classList.add('hidden');
593
  });
594
 
 
595
  confirmProjectBtn.addEventListener('click', () => {
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
596
  newProjectModal.classList.add('hidden');
597
- // Here you would typically send the project data to your backend
598
- alert('Project created successfully!');
 
 
 
 
 
 
599
  });
600
 
601
- // Chat input functionality
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
602
  const chatInput = document.getElementById('chatInput');
603
  const sendMessageBtn = document.getElementById('sendMessageBtn');
 
 
604
 
605
  function sendMessage() {
606
  const message = chatInput.value.trim();
607
  if (message) {
608
- // Here you would typically send the message to your backend and handle the AI response
609
- console.log('Message sent:', message);
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
610
  chatInput.value = '';
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
611
  }
612
  }
613
 
@@ -626,49 +842,8 @@ DELETE /api/users/{id} - Delete user</pre>
626
  this.style.height = (this.scrollHeight) + 'px';
627
  });
628
 
629
- // File explorer click handlers
630
- const fileItems = document.querySelectorAll('.file-item');
631
- fileItems.forEach(item => {
632
- item.addEventListener('click', () => {
633
- // Here you would typically load the file content
634
- console.log('File selected:', item.textContent.trim());
635
- });
636
- });
637
-
638
- // Project item click handlers
639
- const projectItems = document.querySelectorAll('.project-item');
640
- projectItems.forEach(item => {
641
- item.addEventListener('click', () => {
642
- // Here you would typically load the project
643
- console.log('Project selected:', item.querySelector('div > div').textContent.trim());
644
- });
645
- });
646
-
647
- // Simple resizable panels (conceptual, would need more robust implementation)
648
- const resizeHandles = document.querySelectorAll('.resize-handle');
649
- resizeHandles.forEach(handle => {
650
- handle.addEventListener('mousedown', function(e) {
651
- e.preventDefault();
652
- const startX = e.clientX;
653
- const leftPanel = this.previousElementSibling;
654
- const rightPanel = this.nextElementSibling;
655
- const leftWidth = leftPanel.offsetWidth;
656
-
657
- document.addEventListener('mousemove', doDrag);
658
- document.addEventListener('mouseup', stopDrag);
659
-
660
- function doDrag(e) {
661
- const dx = e.clientX - startX;
662
- const newLeftWidth = leftWidth + dx;
663
- leftPanel.style.width = newLeftWidth + 'px';
664
- }
665
-
666
- function stopDrag() {
667
- document.removeEventListener('mousemove', doDrag);
668
- document.removeEventListener('mouseup', stopDrag);
669
- }
670
- });
671
- });
672
  </script>
673
  <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=NahFam13/not-cursor" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
674
  </html>
 
54
  height: calc(100vh - 180px);
55
  overflow-y: auto;
56
  }
57
+ .cursor-blink {
58
+ animation: blink 1s step-end infinite;
59
+ }
60
+ @keyframes blink {
61
+ from, to { opacity: 1; }
62
+ 50% { opacity: 0; }
63
+ }
64
+ .file-item.selected {
65
+ background-color: #e2e8f0;
66
+ }
67
+ .project-item.selected {
68
+ background-color: #e2e8f0;
69
+ }
70
  </style>
71
  </head>
72
  <body class="bg-gray-100 text-gray-800 h-screen flex flex-col">
 
113
  <i class="fas fa-ellipsis-h"></i>
114
  </button>
115
  </div>
116
+ <div class="overflow-y-auto flex-1" id="projectsList">
117
  <div class="project-item p-3 hover:bg-gray-100 cursor-pointer border-b flex items-center">
118
  <i class="fas fa-folder text-yellow-400 mr-3"></i>
119
  <div>
 
207
  <div class="flex-1 flex flex-col overflow-hidden">
208
  <!-- AI Chat Content (default visible) -->
209
  <div id="chatContent" class="flex-1 flex flex-col">
210
+ <div class="chat-container p-4 space-y-4" id="chatMessages">
211
  <!-- AI Message -->
212
  <div class="flex">
213
  <div class="chat-message bg-blue-50 rounded-lg p-3">
 
315
  <button class="hover:text-blue-500">Select AI model</button>
316
  </div>
317
  <div>
318
+ <span id="tokenCount">Token count: 0/4000</span>
319
  </div>
320
  </div>
321
  </div>
 
433
  </div>
434
  </div>
435
  <div class="file-explorer p-2">
436
+ <div class="space-y-1" id="fileList">
437
  <div class="file-item flex items-center p-1 hover:bg-gray-100 rounded cursor-pointer">
438
  <i class="fas fa-folder text-yellow-400 mr-2 w-4 text-center"></i>
439
  <span class="text-sm">fastapi_env</span>
 
491
  </div>
492
  </div>
493
  </div>
494
+ <div class="terminal p-2 flex-1" id="terminalOutput">
495
  <div class="text-green-400">$ <span class="text-white">python -m venv fastapi_env</span></div>
496
  <div class="text-green-400">$ <span class="text-white">source fastapi_env/bin/activate</span></div>
497
  <div class="text-white">(fastapi_env) $ <span class="text-white">pip install fastapi uvicorn sqlalchemy psycopg2-binary</span></div>
 
522
  <div class="p-4 space-y-4">
523
  <div>
524
  <label class="block text-sm font-medium text-gray-700 mb-1">Project Name</label>
525
+ <input type="text" id="projectName" class="w-full border rounded-lg px-3 py-2" placeholder="My Awesome Project">
526
  </div>
527
  <div>
528
  <label class="block text-sm font-medium text-gray-700 mb-1">Project Description</label>
529
+ <textarea id="projectDescription" class="w-full border rounded-lg px-3 py-2" rows="3" placeholder="Brief description of your project..."></textarea>
530
  </div>
531
  <div>
532
  <label class="block text-sm font-medium text-gray-700 mb-1">Project Type</label>
533
+ <select id="projectType" class="w-full border rounded-lg px-3 py-2">
534
  <option>Python</option>
535
  <option>Node.js</option>
536
  <option>React</option>
 
541
  <div>
542
  <label class="block text-sm font-medium text-gray-700 mb-1">Project Location</label>
543
  <div class="flex">
544
+ <input type="text" id="projectLocation" class="flex-1 border rounded-l-lg px-3 py-2" placeholder="/path/to/project">
545
+ <button id="browseLocationBtn" class="bg-gray-200 px-3 rounded-r-lg hover:bg-gray-300">
546
  <i class="fas fa-folder-open"></i>
547
  </button>
548
  </div>
 
596
  const newProjectModal = document.getElementById('newProjectModal');
597
  const cancelProjectBtn = document.getElementById('cancelProjectBtn');
598
  const confirmProjectBtn = document.getElementById('confirmProjectBtn');
599
+ const browseLocationBtn = document.getElementById('browseLocationBtn');
600
+ const projectsList = document.getElementById('projectsList');
601
 
602
  newProjectBtn.addEventListener('click', () => {
603
  newProjectModal.classList.remove('hidden');
 
607
  newProjectModal.classList.add('hidden');
608
  });
609
 
610
+ // Handle project creation
611
  confirmProjectBtn.addEventListener('click', () => {
612
+ const projectName = document.getElementById('projectName').value.trim();
613
+ const projectDescription = document.getElementById('projectDescription').value.trim();
614
+ const projectType = document.getElementById('projectType').value;
615
+ const projectLocation = document.getElementById('projectLocation').value.trim();
616
+ const initGit = document.getElementById('initGit').checked;
617
+ const createEnv = document.getElementById('createEnv').checked;
618
+
619
+ if (!projectName) {
620
+ alert('Please enter a project name');
621
+ return;
622
+ }
623
+
624
+ // Create new project item
625
+ const projectItem = document.createElement('div');
626
+ projectItem.className = 'project-item p-3 hover:bg-gray-100 cursor-pointer border-b flex items-center';
627
+ projectItem.innerHTML = `
628
+ <i class="fas fa-folder text-yellow-400 mr-3"></i>
629
+ <div>
630
+ <div class="font-medium">${projectName}</div>
631
+ <div class="text-xs text-gray-500">${projectType}</div>
632
+ </div>
633
+ `;
634
+
635
+ // Add click handler for the new project
636
+ projectItem.addEventListener('click', () => {
637
+ document.querySelectorAll('.project-item').forEach(item => item.classList.remove('selected'));
638
+ projectItem.classList.add('selected');
639
+
640
+ // Update file explorer with project files
641
+ updateFileExplorer(projectName, projectType);
642
+
643
+ // Update terminal with project-specific commands
644
+ updateTerminal(projectName, projectType);
645
+ });
646
+
647
+ projectsList.prepend(projectItem);
648
  newProjectModal.classList.add('hidden');
649
+
650
+ // Clear form
651
+ document.getElementById('projectName').value = '';
652
+ document.getElementById('projectDescription').value = '';
653
+ document.getElementById('projectLocation').value = '';
654
+
655
+ // Show success message
656
+ alert(`Project "${projectName}" created successfully!`);
657
  });
658
 
659
+ // Simulate file browsing (in a real app, this would use the file system API)
660
+ browseLocationBtn.addEventListener('click', () => {
661
+ document.getElementById('projectLocation').value = '/Users/username/projects/' +
662
+ document.getElementById('projectName').value.trim().toLowerCase().replace(/\s+/g, '-');
663
+ });
664
+
665
+ // Update file explorer based on selected project
666
+ function updateFileExplorer(projectName, projectType) {
667
+ const fileList = document.getElementById('fileList');
668
+ fileList.innerHTML = '';
669
+
670
+ // Common files for all project types
671
+ const commonFiles = [
672
+ { name: 'README.md', icon: 'file-alt', color: 'gray-400' },
673
+ { name: '.gitignore', icon: 'file-alt', color: 'gray-400' }
674
+ ];
675
+
676
+ // Project type specific files
677
+ let projectFiles = [];
678
+ if (projectType === 'Python') {
679
+ projectFiles = [
680
+ { name: 'main.py', icon: 'file-code', color: 'blue-400' },
681
+ { name: 'requirements.txt', icon: 'file-alt', color: 'gray-400' },
682
+ { name: 'venv', icon: 'folder', color: 'yellow-400' }
683
+ ];
684
+ } else if (projectType === 'Node.js') {
685
+ projectFiles = [
686
+ { name: 'index.js', icon: 'file-code', color: 'blue-400' },
687
+ { name: 'package.json', icon: 'file-alt', color: 'gray-400' },
688
+ { name: 'node_modules', icon: 'folder', color: 'yellow-400' }
689
+ ];
690
+ } else if (projectType === 'React') {
691
+ projectFiles = [
692
+ { name: 'src', icon: 'folder', color: 'yellow-400' },
693
+ { name: 'package.json', icon: 'file-alt', color: 'gray-400' },
694
+ { name: 'public', icon: 'folder', color: 'yellow-400' }
695
+ ];
696
+ }
697
+
698
+ // Add all files to the explorer
699
+ [...projectFiles, ...commonFiles].forEach(file => {
700
+ const fileItem = document.createElement('div');
701
+ fileItem.className = 'file-item flex items-center p-1 hover:bg-gray-100 rounded cursor-pointer';
702
+ fileItem.innerHTML = `
703
+ <i class="fas fa-${file.icon} text-${file.color} mr-2 w-4 text-center"></i>
704
+ <span class="text-sm">${file.name}</span>
705
+ `;
706
+
707
+ // Add click handler for file selection
708
+ fileItem.addEventListener('click', () => {
709
+ document.querySelectorAll('.file-item').forEach(item => item.classList.remove('selected'));
710
+ fileItem.classList.add('selected');
711
+
712
+ // In a real app, this would load the file content
713
+ console.log(`File selected: ${file.name}`);
714
+ });
715
+
716
+ fileList.appendChild(fileItem);
717
+ });
718
+ }
719
+
720
+ // Update terminal with project-specific commands
721
+ function updateTerminal(projectName, projectType) {
722
+ const terminalOutput = document.getElementById('terminalOutput');
723
+
724
+ if (projectType === 'Python') {
725
+ terminalOutput.innerHTML = `
726
+ <div class="text-green-400">$ <span class="text-white">cd ${projectName.toLowerCase().replace(/\s+/g, '-')}</span></div>
727
+ <div class="text-green-400">$ <span class="text-white">python -m venv venv</span></div>
728
+ <div class="text-green-400">$ <span class="text-white">source venv/bin/activate</span></div>
729
+ <div class="text-white">(venv) $ <span class="text-white">pip install -r requirements.txt</span></div>
730
+ <div class="text-white">(venv) $ <span class="text-white">python main.py</span></div>
731
+ <div class="text-white">(venv) $ <span class="cursor-blink">█</span></div>
732
+ `;
733
+ } else if (projectType === 'Node.js') {
734
+ terminalOutput.innerHTML = `
735
+ <div class="text-green-400">$ <span class="text-white">cd ${projectName.toLowerCase().replace(/\s+/g, '-')}</span></div>
736
+ <div class="text-green-400">$ <span class="text-white">npm install</span></div>
737
+ <div class="text-green-400">$ <span class="text-white">node index.js</span></div>
738
+ <div class="text-green-400">$ <span class="cursor-blink">█</span></div>
739
+ `;
740
+ }
741
+
742
+ // Auto-scroll to bottom
743
+ terminalOutput.scrollTop = terminalOutput.scrollHeight;
744
+ }
745
+
746
+ // Chat functionality
747
  const chatInput = document.getElementById('chatInput');
748
  const sendMessageBtn = document.getElementById('sendMessageBtn');
749
+ const chatMessages = document.getElementById('chatMessages');
750
+ const tokenCount = document.getElementById('tokenCount');
751
 
752
  function sendMessage() {
753
  const message = chatInput.value.trim();
754
  if (message) {
755
+ // Add user message to chat
756
+ const userMessage = document.createElement('div');
757
+ userMessage.className = 'flex justify-end';
758
+ userMessage.innerHTML = `
759
+ <div class="chat-message bg-gray-100 rounded-lg p-3">
760
+ <div class="flex items-center mb-1 justify-end">
761
+ <div class="font-medium mr-2">You</div>
762
+ <div class="w-6 h-6 rounded-full bg-gray-500 flex items-center justify-center text-white">
763
+ <i class="fas fa-user text-xs"></i>
764
+ </div>
765
+ </div>
766
+ <div class="text-sm">${message}</div>
767
+ </div>
768
+ `;
769
+ chatMessages.appendChild(userMessage);
770
+
771
+ // Clear input
772
  chatInput.value = '';
773
+ chatInput.style.height = 'auto';
774
+
775
+ // Update token count (simplified - in a real app, you'd use a tokenizer)
776
+ const tokens = Math.min(Math.ceil(message.length / 4), 4000);
777
+ tokenCount.textContent = `Token count: ${tokens}/4000`;
778
+
779
+ // Show "AI is typing" indicator
780
+ const typingIndicator = document.createElement('div');
781
+ typingIndicator.className = 'flex';
782
+ typingIndicator.innerHTML = `
783
+ <div class="chat-message bg-blue-50 rounded-lg p-3">
784
+ <div class="flex items-center mb-1">
785
+ <div class="w-6 h-6 rounded-full bg-blue-500 flex items-center justify-center text-white mr-2">
786
+ <i class="fas fa-robot text-xs"></i>
787
+ </div>
788
+ <div class="font-medium">AI Assistant</div>
789
+ </div>
790
+ <div class="text-sm">
791
+ <i class="fas fa-circle-notch fa-spin"></i> Thinking...
792
+ </div>
793
+ </div>
794
+ `;
795
+ chatMessages.appendChild(typingIndicator);
796
+
797
+ // Scroll to bottom
798
+ chatMessages.scrollTop = chatMessages.scrollHeight;
799
+
800
+ // Simulate AI response after a delay
801
+ setTimeout(() => {
802
+ // Remove typing indicator
803
+ typingIndicator.remove();
804
+
805
+ // Add AI response
806
+ const aiResponse = document.createElement('div');
807
+ aiResponse.className = 'flex';
808
+ aiResponse.innerHTML = `
809
+ <div class="chat-message bg-blue-50 rounded-lg p-3">
810
+ <div class="flex items-center mb-1">
811
+ <div class="w-6 h-6 rounded-full bg-blue-500 flex items-center justify-center text-white mr-2">
812
+ <i class="fas fa-robot text-xs"></i>
813
+ </div>
814
+ <div class="font-medium">AI Assistant</div>
815
+ </div>
816
+ <div class="text-sm">
817
+ <p>Here's a response to your query about "${message.substring(0, 20)}...":</p>
818
+ <p class="mt-2">In a real implementation, this would be the AI's actual response based on your query.</p>
819
+ </div>
820
+ </div>
821
+ `;
822
+ chatMessages.appendChild(aiResponse);
823
+
824
+ // Scroll to bottom again
825
+ chatMessages.scrollTop = chatMessages.scrollHeight;
826
+ }, 1500);
827
  }
828
  }
829
 
 
842
  this.style.height = (this.scrollHeight) + 'px';
843
  });
844
 
845
+ // Initialize project selection
846
+ document.querySelector('.project-item').click();
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
847
  </script>
848
  <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=NahFam13/not-cursor" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
849
  </html>
prompts.txt CHANGED
@@ -0,0 +1 @@
 
 
1
+ Review index.html and begin adding code to our placeholder comments which start with "//".