Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Enhanced File Handling: File Support, Improved UI, and Robust Processing #130

Open
wants to merge 31 commits into
base: main
Choose a base branch
from

Conversation

Anajrim01
Copy link
Contributor

@Anajrim01 Anajrim01 commented Oct 7, 2024

This pull request significantly enhances the application's file handling and preview capabilities by introducing robust support for file uploads. It primarily focuses on improving document handling, particularly for PDFs and various text-based formats. Future updates will further expand supported formats and refine the processing mechanisms.

Features

  • Document Upload:
    • Extract text and images from PDF files.
    • Inline positioning of text and images extracted from PDFs.
    • Support for text-based formats such as .py, .cs, .cpp, .c, .txt, and .csv files.
  • UI Enhancements:
    • Improved design for displaying attachments, including images and document contents.
    • Clear feedback and handling for file upload limits and unsupported file types.

Code Changes

  • File Handling:
    • Integrated pdfjs-dist library for handling PDF files.
    • Implemented functions for loading PDFs, extracting text content, and extracting image data.
    • Updated fileUtils.ts (now fileHandler.ts) to process and handle different file types, including advanced extraction for PDFs.
    • Added readFileAsArrayBuffer function for reading files as an ArrayBuffer.
    • Refactored multiple utilities to support additional formats and improved error handling.
  • Chat and UI Enhancements:
    • Updated ChatInput.svelte to handle file input and display attachments.
    • Enhanced markdownUtils.ts to render attachments properly in the UI.
    • Adjusted suggestChatTitle logic in shared.ts for better integration with supported models and file attachments.
    • Improved attachment visualization - fixed bugs related to attachment deletion and incorrect image linking.
    • Redesigned layout and attachment display for better user experience.
    • Improved FileDropzone for smoother file uploads.
  • Technical Improvements:
    • Added async-mutex to package.json for better async operation management.
    • Enhanced Rollup configuration in vite.config.ts to split third-party modules into separate chunks.
    • Updated dependencies for security and performance.

Detailed Commits

  • PDF Support and Extraction:
    • Implement functions for loading, text extraction, and image data handling.
    • Improve error handling and logging for PDF processing.
  • File Attachment Rendering:
    • Modify renderContentArray function in markdownUtils.ts for better file attachment display.
    • Extend ChatContent interface to support file attachments.
    • Add better feedback mechanisms for file uploads and skipped files.
  • Model-specific Image Handling:
    • Ensure images are parsed only when using OpenAI models.
    • Add validation for image upload limit.
  • General Enhancements:
    • Improve chat message support for attachments.
    • Refactor UI components for clearer error messages and smoother file handling.
    • Optimize performance and remove redundant code.

To-Do List

  • Expand support for additional document and text-based formats.
  • Ensure precise image parsing for OpenAI models.
  • Write and execute comprehensive tests for file upload functionalities, covering edge cases and potential failures.
  • Refine the User Interface for better visual consistency and responsive design.
  • Update user documentation to include the new file upload feature.
  • Add system prompt for better user guidance.
  • Conduct a general code review and refactor for optimization.
  • Update Proxy API to accommodate new file upload features (or join ChatContent array on client-side).
  • Limit file size so it doesn't exceed max token limit (model specific).

This set of changes collectively boosts the application's ability to handle various file formats, improves user experience through refined UI, and ensures robust processing and previewing of uploaded files.

Copy link

vercel bot commented Oct 7, 2024

@Anajrim01 is attempting to deploy a commit to the ShipBit Team on Vercel.

A member of the Team first needs to authorize it.

- Integrate pdfjs-dist library for handling PDF files
- Implement functions for loading PDF, extracting text content, and extracting image data
- Update fileUtils.ts to handle PDF uploads and limit the number of attachments
- Add readFileAsArrayBuffer function for reading files as ArrayBuffer
- Refactor handleFiles.ts to handle PDF extraction requests
- Improve error handling and logging for PDF processing
@Anajrim01 Anajrim01 changed the title feat: Add support for PDF file uploads and extraction feat: Add support for file uploads and extraction Oct 7, 2024
@Anajrim01 Anajrim01 changed the title feat: Add support for file uploads and extraction feat: Add support for file uploads Oct 7, 2024
- bug: currently deleting attachment doesn't delete the image as they're not linked (maybe create seperate FileAttachments interface?)
This commit modifies the `renderContentArray` function in `markdownUtils.ts` to properly render file attachments for text content. It adds a new condition to check if the `fileAttached` property of the attachment is true, and if so, it renders a container with the attachment details.

This change addresses the bug mentioned in the recent user commits where deleting an attachment did not delete the associated image because they were not properly linked. It also extends the `ChatContent` interface to support file attachments.
- Rename processFile to processImageFile for clarity.
- Add VerbosityLevel.ERRORS to loadPdf for concise error reporting from PDF.js.
- Improve showUploadResult to provide better feedback on uploaded images and skipped files.
- Enhance extractImageData to handle duplicates using a Set.
- Ensure correct image extraction from both objs and commonObjs.
- Simplify removeAttachment logic for accurate removal based on specified index and quantity.
- Update uploadFilesAndDebounce to correctly count only image_url attachments.
- Add validation for image upload limit in handleFileExtractionRequest.
Copy link

vercel bot commented Oct 13, 2024

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
slickgpt ✅ Ready (Inspect) Visit Preview 💬 Add feedback Oct 15, 2024 0:22am

- Improved chat message support for attachments.
- Redesigned layout for better attachment display.
- Refined FileDropzone for easier file uploads.
- Fixed image positioning issues in text.
- Updated dependencies for security and performance.
- Added `async-mutex` to `package.json` for better async operation management.
- Updated `ChatInput.svelte` to support more text file formats and improved UI messages.
- Refactored `fileUtils.ts` to `fileHandler.ts` for better code organization.
- Introduced `extractTextFileContent` for handling text file extraction.
- Moved file reading utilities to `shared.ts` for reuse.
- Simplified `processImageFile` and made it exportable.
- Enhanced Rollup configuration in `vite.config.ts` to split third-party modules into separate chunks.
- Improved error handling and edge case management in file processing.
@Anajrim01 Anajrim01 changed the title feat: Add support for file uploads Enhanced File Handling: PDF Support, Improved UI, and Robust Processing Oct 13, 2024
Anajrim01 and others added 7 commits October 14, 2024 01:02
- Introduced `processContent` function to streamline content processing, ensuring message content is consistently formatted as `ChatContent[]`.
- Added logic to handle unsupported image URLs for non-OpenAi providers, displaying a warning toast and removing such images from messages.
- Simplified `processMessageContent` by utilizing the new `processContent` function, improving code readability and maintainability.
- Updated `editMessage` function to handle message content and attachments more effectively, ensuring proper handling of text and image data.
- Removed redundant `processContentItem` function, consolidating content processing logic.
- Introduced `processContent` function to streamline content processing, ensuring message content is consistently formatted as `ChatContent[]`.
- Added logic to handle unsupported image URLs for non-OpenAi providers, displaying a warning toast and removing such images from messages.
- Simplified `processMessageContent` by utilizing the new `processContent` function, improving code readability and maintainability.
- Updated `editMessage` function to handle message content and attachments more effectively, ensuring proper handling of text and image data.
- Removed redundant `processContentItem` function, consolidating content processing logic.
@Anajrim01
Copy link
Contributor Author

Hello @Shackless, I've tried to make everything as clear to understand as possible. Also some small UI improvements here and there for a more seamless UX.

@Anajrim01 Anajrim01 marked this pull request as ready for review October 14, 2024 19:56
@Anajrim01 Anajrim01 changed the title Enhanced File Handling: PDF Support, Improved UI, and Robust Processing Enhanced File Handling: File Support, Improved UI, and Robust Processing Oct 14, 2024
- The width and height are set on upload of image by default, if for some reason this fails. There's a fallback method which is broken but might work in some cases.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant