/** @jsxImportSource https://esm.sh/react@18.2.0 */ import React, { useState, useEffect } from "https://esm.sh/react@18.2.0"; import { createRoot } from "https://esm.sh/react-dom@18.2.0/client"; /** * Main App component for the File Manager application. * This component handles the user interface for file uploads, listing, and content viewing. * It interacts with a SQLite database through API endpoints for file management. */ function App() { // State management for the application const [files, setFiles] = useState([]); // Stores the list of files from the database const [selectedFile, setSelectedFile] = useState(null); // Currently selected file for viewing const [fileContent, setFileContent] = useState(""); // Content of the selected file const [error, setError] = useState(null); // Stores any error messages const [uploadFiles, setUploadFiles] = useState([]); // Files selected for upload const [uploadStatus, setUploadStatus] = useState(""); // Status message for file upload process // Fetch the list of files when the component mounts useEffect(() => { fetchFiles(); }, []); /** * Fetches the list of files from the server and updates the state. * This function is called on initial load and after successful file uploads. */ const fetchFiles = async () => { try { const response = await fetch('/list-files'); if (!response.ok) { throw new Error(`HTTP error! status: ${response.status}`); } const fileList = await response.json(); setFiles(fileList); } catch (e) { console.error("Failed to fetch files:", e); setError("Failed to fetch files. Please try again later."); } }; /** * Handles the selection of a file from the list. * Fetches the content of the selected file and updates the state. * @param {Object} file - The file object selected by the user */ const handleFileSelect = async (file) => { setSelectedFile(file); try { const response = await fetch(`/file-content/${file.id}`); if (!response.ok) { throw new Error(`HTTP error! status: ${response.status}`); } const content = await response.text(); setFileContent(content); } catch (e) { console.error("Failed to fetch file content:", e); setError("Failed to fetch file content. Please try again later."); } }; /** * Handles the file upload process. * Creates a FormData object with all selected files and sends it to the server. * Updates the file list and upload status upon completion. * @param {Event} e - The form submission event */ const handleFileUpload = async (e) => { e.preventDefault(); if (uploadFiles.length === 0) return; setUploadStatus("Uploading..."); const formData = new FormData(); uploadFiles.forEach((file, index) => { formData.append(`file${index}`, file); }); try { const response = await fetch('/upload', { method: 'POST', body: formData, }); if (!response.ok) { throw new Error(`HTTP error! status: ${response.status}`); } setUploadFiles([]); fetchFiles(); setUploadStatus("Files uploaded successfully!"); } catch (e) { console.error("Failed to upload files:", e); setError("Failed to upload files. Please try again later."); setUploadStatus("Upload failed."); } }; // Render an error message if there's an error if (error) { return

Error: {error}

; } // Main render function for the App component return (

File Manager

Upload text files and view their contents. Files are stored in a SQLite database.

Upload Files:

{uploadStatus &&

{uploadStatus}

}

Files:

handleFileSelect(file)} style={{ cursor: 'pointer', color: selectedFile?.id === file.id ? 'blue' : 'black' }}> {file.filename} - {file.size} bytes

File Content:

{selectedFile ? (

              {fileContent}

) : (

Select a file to view its content

)}

Using This Database as a Knowledge Base for Your Custom GPT

This SQLite database can serve as a dynamic knowledge base for your custom GPT. Here's how to connect and utilize it:

API Endpoints:

List Files: GET https://dirkviester-spontaneoustealamphibian.web.val.run/list-files
Get File Content: GET https://dirkviester-spontaneoustealamphibian.web.val.run/file-content/{'{fileId}'}
Upload Files: POST https://dirkviester-spontaneoustealamphibian.web.val.run/upload
(Send as multipart/form-data with 'file0', 'file1', etc. fields)

Integration Steps:

In your custom GPT's configuration, set up these endpoints as API calls.
Create a function that retrieves the list of files and their IDs.
Implement a method to fetch the content of specific files based on user queries or context.
Process and incorporate the retrieved content into your GPT's responses.

Example Workflow:

When a user asks a question, first check if it's related to your knowledge base.
If relevant, fetch the list of files and identify which might contain the answer.
Retrieve the content of the most relevant file(s).
Use the file content to inform and enhance your GPT's response.

Capabilities and Limitations:

Dynamic Knowledge: You can update the knowledge base in real-time by uploading new files or modifying existing ones.
Structured Data: Ideal for storing and retrieving structured information like FAQs, product details, or documentation.
Scalability: Suitable for small to medium-sized knowledge bases, typically up to a few hundred files or a total size of 100MB. For larger datasets (e.g., thousands of files or gigabytes of data), consider more robust solutions like dedicated document databases or vector stores.
Text-Only: Currently limited to text files. Not suitable for binary data or large media files.
No Built-in Search: The current implementation doesn't include text search capabilities. Your GPT will need to handle content relevance.
Rate Limiting: To avoid overloading the server, limit API calls to a maximum of 60 requests per minute. For optimal performance, aim for an average of 30 requests per minute or less. If you need higher throughput, consider implementing a caching layer or upgrading to a more robust backend solution.

Optimizing for GPT-4:

Chunking: If files are large (over 4,096 tokens or approximately 3,000 words), consider breaking them into smaller, topic-focused chunks of 1,000-2,000 tokens each for more efficient processing. This aligns well with GPT-4's context window and helps in retrieving more relevant information.
Metadata: Include metadata in your files (e.g., tags, categories) to help your GPT quickly identify relevant content.
Context Management: GPT-4 has a large context window. Use it wisely by prioritizing the most relevant information from your knowledge base.
Prompt Engineering: Craft your prompts to effectively utilize both the GPT-4 model's capabilities and your custom knowledge base.

Remember, while this setup provides a flexible knowledge base, it's up to your custom GPT's logic to effectively utilize this information. Regularly update your knowledge base and refine your GPT's interaction with it for the best results.

); } /** * Client-side rendering function. * This function is called when the script runs in a browser environment. */ function client() { createRoot(document.getElementById("root")).render(); } // Check if we're in a browser environment and call the client function if so if (typeof document !== "undefined") { client(); } /** * Main request handler for the server-side logic. * This function routes incoming requests to the appropriate handler based on the URL path. * @param {Request} request - The incoming HTTP request * @returns {Promise} The HTTP response */ export default async function handleRequest(request: Request): Promise { // Import the SQLite module dynamically const { sqlite } = await import("https://esm.town/v/stevekrouse/sqlite"); await initializeDatabase(sqlite); const url = new URL(request.url); const path = url.pathname; // Route the request based on the URL path if (path === '/list-files') { return handleListFiles(sqlite); } else if (path.startsWith('/file-content/')) { const fileId = parseInt(path.slice('/file-content/'.length), 10); return handleFileContent(sqlite, fileId); } else if (path === '/upload' && request.method === 'POST') { return handleFileUpload(sqlite, request); } else { return serveHTML(); } } /** * Initializes the SQLite database by creating the necessary table if it doesn't exist. * @param {Object} sqlite - The SQLite module */ async function initializeDatabase(sqlite) { const KEY = new URL(import.meta.url).pathname.split("/").at(-1); await sqlite.execute(` CREATE TABLE IF NOT EXISTS ${KEY}_files ( id INTEGER PRIMARY KEY AUTOINCREMENT, filename TEXT NOT NULL, content TEXT NOT NULL, size INTEGER NOT NULL, timestamp DATETIME DEFAULT CURRENT_TIMESTAMP ) `); } /** * Handles the request to list all files in the database. * @param {Object} sqlite - The SQLite module * @returns {Promise} JSON response with the list of files */ async function handleListFiles(sqlite): Promise { try { const KEY = new URL(import.meta.url).pathname.split("/").at(-1); const result = await sqlite.execute(`SELECT id, filename, size FROM ${KEY}_files ORDER BY timestamp DESC`); return new Response(JSON.stringify(result.rows), { headers: { "Content-Type": "application/json" }, }); } catch (error) { console.error("Error listing files:", error); return new Response(JSON.stringify({ error: "Failed to list files" }), { status: 500, headers: { "Content-Type": "application/json" }, }); } } /** * Handles the request to fetch the content of a specific file. * @param {Object} sqlite - The SQLite module * @param {number} fileId - The ID of the file to fetch * @returns {Promise} The content of the requested file */ async function handleFileContent(sqlite, fileId: number): Promise { try { const KEY = new URL(import.meta.url).pathname.split("/").at(-1); const result = await sqlite.execute(`SELECT content FROM ${KEY}_files WHERE id = ?`, [fileId]); if (result.rows.length === 0) { return new Response("File not found", { status: 404 }); } return new Response(result.rows[0].content, { headers: { "Content-Type": "text/plain" }, }); } catch (error) { console.error("Error fetching file content:", error); return new Response(JSON.stringify({ error: "Failed to fetch file content" }), { status: 500, headers: { "Content-Type": "application/json" }, }); } } /** * Handles the file upload request. * This function processes multiple file uploads and stores them in the SQLite database. * @param {Object} sqlite - The SQLite module * @param {Request} request - The HTTP request containing the file data * @returns {Promise} JSON response indicating the success or failure of the upload */ async function handleFileUpload(sqlite, request: Request): Promise { try { const formData = await request.formData(); const KEY = new URL(import.meta.url).pathname.split("/").at(-1); const uploadedFiles = []; for (const [key, file] of formData.entries()) { if (file instanceof File) { const content = await file.text(); await sqlite.execute( `INSERT INTO ${KEY}_files (filename, content, size) VALUES (?, ?, ?)`, [file.name, content, file.size] ); uploadedFiles.push(file.name); } } if (uploadedFiles.length === 0) { return new Response(JSON.stringify({ error: "No files provided" }), { status: 400, headers: { "Content-Type": "application/json" }, }); } return new Response(JSON.stringify({ message: `Files uploaded successfully: ${uploadedFiles.join(', ')}` }), { headers: { "Content-Type": "application/json" }, }); } catch (error) { console.error("Error uploading files:", error); return new Response(JSON.stringify({ error: "Failed to upload files" }), { status: 500, headers: { "Content-Type": "application/json" }, }); } } /** * Serves the HTML for the client-side application. * This function generates the initial HTML structure and includes necessary scripts and styles. * @returns {Response} The HTML response for the client-side application */ function serveHTML(): Response { return new Response(` File Manager

`, { headers: { "Content-Type": "text/html" }, }); } /** * CSS styles for the application. * These styles are injected into the HTML to provide a consistent look and feel. */ const css = ` body { font-family: Arial, sans-serif; max-width: 1200px; margin: 0 auto; padding: 20px; line-height: 1.6; } h1, h2, h3 { color: #333; } ul, ol { padding-left: 20px; } li { margin-bottom: 10px; } pre { background-color: #f0f0f0; padding: 10px; border-radius: 5px; overflow-x: auto; } form { margin-bottom: 20px; } input[type="file"] { margin-right: 10px; } .api-instructions { margin-top: 40px; padding: 20px; background-color: #f9f9f9; border-radius: 5px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); } .api-instructions code { display: inline-block; background-color: #e0e0e0; padding: 2px 5px; border-radius: 3px; font-family: monospace; } .api-instructions h3 { margin-top: 20px; margin-bottom: 10px; } `;

dirkviester