Spaces:

mokecome
/

Directory_to_LLM

Running

App Files Files Community

mokecome commited on Jan 4

Commit

29facc1

verified ·

1 Parent(s): a79d5e4

Upload 3 files

Browse files

Files changed (3) hide show

.gitignore +1 -0
LICENSE +21 -0
index.html +378 -19

.gitignore ADDED Viewed

	@@ -0,0 +1 @@


1	+ .DS_Store

LICENSE ADDED Viewed

	@@ -0,0 +1,21 @@

+MIT License
+Copyright (c) 2024 pathfinder
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

index.html CHANGED Viewed

@@ -1,19 +1,378 @@
-<!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="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Convert Directory to LLM XML prompt</title>
+    <style>
+      :root {
+        --primary-color: #2563eb;
+        --hover-color: #1d4ed8;
+        --border-color: #e5e7eb;
+        --text-color: #1f2937;
+        --background-color: #ffffff;
+        --excluded-opacity: 0.65;
+      }
+      * {
+        box-sizing: border-box;
+        margin: 0;
+        padding: 0;
+      }
+      body {
+        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
+          sans-serif;
+        line-height: 1.5;
+        color: var(--text-color);
+        padding: 1rem;
+      }
+      .container {
+        max-width: 1200px;
+        margin: 0 auto;
+        display: block;
+        gap: 1rem;
+      }
+      .header-controls {
+        display: flex;
+        gap: 0.5rem;
+        align-items: center;
+        width: 100%;
+        justify-content: space-between;
+      }
+      .header-controls-left {
+        display: flex;
+        gap: 0.5rem;
+        align-items: center;
+      }
+      .form-group {
+        margin-bottom: 1rem;
+      }
+      .form-group label {
+        display: block;
+        margin-bottom: 0.5rem;
+        font-weight: 500;
+      }
+      .form-group input[type='text'] {
+        width: 100%;
+        padding: 0.5rem;
+        border: 1px solid var(--border-color);
+        border-radius: 0.25rem;
+        font-size: 0.875rem;
+      }
+      .checkbox-group {
+        margin-bottom: 1rem;
+      }
+      .button {
+        padding: 0.5rem;
+        border: 1px solid var(--border-color);
+        border-radius: 0.25rem;
+        background-color: white;
+        cursor: pointer;
+        font-size: 0.875rem;
+        transition: all 0.2s;
+      }
+      .button.primary {
+        background-color: var(--primary-color);
+        color: white;
+        border-color: var(--primary-color);
+      }
+      .button:hover {
+        background-color: var(--hover-color);
+        border-color: var(--hover-color);
+        color: white;
+        padding: 0.5rem 1rem;
+      }
+      .tree-container {
+        border: 1px solid var(--border-color);
+        border-radius: 0.5rem;
+        overflow: hidden;
+      }
+      .tree-header {
+        padding: 1rem;
+        border-bottom: 1px solid var(--border-color);
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+      }
+      .tree-controls {
+        display: flex;
+        gap: 0.5rem;
+      }
+      #fileTree {
+        height: 100%;
+        overflow-y: auto;
+        padding: 1rem;
+        min-width: 0;
+      }
+      .tree-node {
+        display: flex;
+        align-items: center;
+        padding: 0.25rem 0;
+        margin-left: 1.5rem;
+      }
+      .tree-node.excluded {
+        opacity: var(--excluded-opacity);
+      }
+      .tree-node-content {
+        display: flex;
+        align-items: center;
+        gap: 0.5rem;
+        cursor: pointer;
+        padding: 0.25rem;
+        border-radius: 0.25rem;
+      }
+      .tree-checkbox {
+        width: 16px;
+        height: 16px;
+        margin-right: 0.5rem;
+      }
+      .stats {
+        margin-top: 1rem;
+        padding: 1rem;
+        background-color: #f9fafb;
+        border-radius: 0.25rem;
+        font-size: 0.875rem;
+      }
+      .upload-message {
+        text-align: center;
+        padding: 2rem;
+        color: #6b7280;
+      }
+      .container-split {
+        display: grid;
+        grid-template-columns: minmax(300px, 1fr) minmax(300px, 1fr);
+        gap: 1rem;
+        height: calc(100vh - 200px);
+        overflow: hidden;
+      }
+      @media (max-width: 768px) {
+        .container-split {
+          grid-template-columns: 1fr;
+          height: auto;
+          min-height: calc(100vh - 200px);
+        }
+        .header-controls {
+          flex-direction: column;
+          align-items: stretch;
+          gap: 1rem;
+        }
+        .header-controls-left {
+          flex-wrap: wrap;
+        }
+        .button {
+          padding: 0.75rem;
+          min-height: 44px;
+        }
+        .button span:not(.icon) {
+          display: inline-block;
+          margin-left: 0.25rem;
+        }
+        .selected-files-panel {
+          border-left: none;
+          border-top: 1px solid var(--border-color);
+          max-height: 50vh;
+        }
+        .tree-container {
+          max-height: 100vh;
+          overflow: auto;
+        }
+      }
+      .selected-files-panel {
+        border-left: 1px solid var(--border-color);
+        padding: 1rem;
+        display: flex;
+        flex-direction: column;
+        min-width: 0;
+        overflow: hidden;
+      }
+      .selected-files-header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        margin-bottom: 1rem;
+      }
+      .selected-files-content {
+        flex: 1;
+        overflow: auto;
+        background: #f9fafb;
+        padding: 1rem;
+        border-radius: 0.25rem;
+        font-family: monospace;
+        font-size: 0.875rem;
+        white-space: pre;
+        margin: 0;
+      }
+      .button-group {
+        margin-left: 1rem;
+        display: flex;
+        gap: 0.25rem;
+        border-radius: 0.25rem;
+      }
+      .button-group .button {
+        border-radius: 0;
+      }
+      .button-group .button:first-child {
+        border-top-left-radius: 0.25rem;
+        border-bottom-left-radius: 0.25rem;
+      }
+      .button-group .button:last-child {
+        border-top-right-radius: 0.25rem;
+        border-bottom-right-radius: 0.25rem;
+      }
+      .button .icon {
+        display: inline-block;
+        margin-right: 0;
+      }
+      .button span:not(.icon) {
+        display: none;
+      }
+      .button-group:hover .button span:not(.icon) {
+        display: inline-block;
+        margin-left: 0.25rem;
+      }
+      .button-group:hover .button {
+        padding: 0.5rem 1rem;
+      }
+      .button.danger {
+        border-color: #dc2626;
+        color: #dc2626;
+      }
+      .button.danger:hover {
+        background-color: #dc2626;
+        border-color: #dc2626;
+        color: white;
+      }
+      .mobile-warning {
+        display: none;
+        background-color: #fff3cd;
+        border: 1px solid #ffeeba;
+        color: #856404;
+        padding: 1rem;
+        margin-bottom: 1rem;
+        border-radius: 0.25rem;
+        text-align: center;
+      }
+      @media (max-width: 768px) {
+        .mobile-warning {
+          display: block;
+        }
+      }
+    </style>
+    <script
+      lang="javascript"
+      src="https://cdn.sheetjs.com/xlsx-0.20.3/package/dist/xlsx.full.min.js"
+    ></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.min.js"></script>
+    <script>
+      pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.worker.min.js';
+    </script>
+  </head>
+  <body>
+    <div class="container">
+      <div class="mobile-warning">
+        ⚠ This tool is optimized for larger screens. Mobile functionality is basic.
+      </div>
+      <div class="tree-container">
+        <div class="tree-header">
+          <div class="header-controls">
+            <div class="header-controls-left">
+              <label for="directoryInput" class="button primary">Select Directory</label>
+              <input
+                type="file"
+                id="directoryInput"
+                webkitdirectory
+                directory
+                multiple
+                style="display: none"
+              />
+              <div class="button-group">
+                <button id="expandAllButton" class="button" title="Expand all folders">
+                  <span class="icon">▼</span><span>Expand All</span>
+                </button>
+                <button id="collapseAllButton" class="button" title="Collapse all folders">
+                  <span class="icon">▶</span><span>Collapse All</span>
+                </button>
+              </div>
+              <div class="button-group">
+                <button id="selectAllButton" class="button" title="Select all files">
+                  <span class="icon">☑</span><span>Select All</span>
+                </button>
+                <button id="deselectAllButton" class="button" title="Deselect all files">
+                  <span class="icon">☐</span><span>Deselect All</span>
+                </button>
+              </div>
+            </div>
+            <button id="clearButton" class="button danger" title="Clear all files">
+              <span class="icon">×</span><span>Clear</span>
+            </button>
+          </div>
+        </div>
+        <div class="container-split">
+          <div id="fileTree">
+            <div class="upload-message">Select a directory to view its contents</div>
+          </div>
+          <div class="selected-files-panel">
+            <div class="selected-files-header">
+              <h3>Selected Files</h3>
+              <button id="copyButton" class="button">Copy to Clipboard</button>
+            </div>
+            <pre id="selectedFilesContent" class="selected-files-content"></pre>
+          </div>
+        </div>
+        <div class="stats">
+          Selected Files: <span id="selectedCount">0</span> | Estimated Tokens:
+          <span id="estimatedTokens">0</span>
+        </div>
+      </div>
+    </div>
+    <script src="static/js/app.js"></script>
+  </body>
+</html>