File Manager

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

Upload Files:

\n \n {uploadStatus &&

{uploadStatus}

}\n

Files:

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

File Content:

\n {selectedFile ? (\n

\n              {fileContent}\n

\n ) : (\n

Select a file to view its content

\n )}\n

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:

\n \n

API Endpoints:

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

\n\n

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.

\n\n

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.

\n\n

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.

\n\n

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.

\n\n

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

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

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