Convert chart image to custom charts (BETA)
View Webapp
·
Report Bug
·
Request Feature
Table of Contents
Image to Chart is a web application that allows users to upload chart image and convert them into fully customizable charts. The uploaded image is analyzed using generative AI to extract the underlying data, which is then utilized to recreate the chart. The application currently supports three chart types: Column, Bar, and Line charts. Users can edit the chart's x-axis and legends, as well as further enhance and personalize the chart with a wide range of customization options.
- Customize online chart images: Tailor existing chart images with a wide range of configurable options.
- Enhance hand-drawn charts: Refine and improve charts captured from photographs or existing images.
- Generate versatile charts: Convert images into customizable charts and easily capture screenshots for various uses.
- Utilized React for web development, incorporating React Hooks and the Context API for efficient state management and sharing across components.
- Integrated Highcharts for data visualization, enabled extensive custom configurations to make chart more interactive.
- Implemented client-side caching to minimize analysis time and computational load, followed LRU mechanisms to manage cache effectively. Additionally, leveraged browser-built-in crypto hashing for optimal data caching.
- Used Apollo Client to manage GraphQL queries seamlessly.
- Integrated the react-drag-drop-files library to allow users to upload images and utilized Lodash for deep cloning, preventing unintended data mutations.
- Used ExpressJS in combination with GraphQL, managing and maintaining GraphQL schemas effectively.
- Leveraged Google's Generative AI (Gemini) to analyze images sent in Base64 format from the client.
- Performed prompt engineering to achieve accurate results, optimizing and refining prompts to minimize token usage and reduce billable costs in enterprise setups.
- Seperated system prompts to sequentially process each analysis based on intermediate outputs.
- Configured CORS to enable secure Cross-Origin Resource Sharing.
- Both frontend and backend projects reside within the same git repository.
- Defined folder-specific paths to ensure isolated deployments for the frontend and backend.
1. Frontend hosted on Firebase:
- Deployed the frontend project on firebase.
- Since firebase does not natively sync with repositories, I configured github actions for continuous integration and deployment (CI/CD).
- Set up a github actions workflow to build and deploy the frontend project based on updates to the frontend folder.
- Ensured that only the frontend project is deployed when the frontend folder is modified, while the backend remains unaffected.
2. Backend hosted on Vercel:
- Deployed the backend project on vercel.
- Synced vercel directly with the git repository.
- Configured vercel deployment rules through the vercel dashboard to target the backend folder within the monorepo.
- Established deployment rules such that updates to the backend folder trigger vercel deployments, while github actions remain inactive.
OpenCV was my go-to tool in my past couple of projects focused on media extraction, I used it extensively for all my image and video processing needs. However for my current project centered on image data extraction, Generative AI has proven to be a game changer.
- There is no longer a need to write complex code for reading, processing, filtering, and tuning images.
- Traditional algorithmic analysis to achieve context-based data extraction is no longer required.
- With generative AI, the focus shifts to framing the prompts, providing relevant context, and interacting with the LLM model.
- AI handles all levels of image processing and delivers accurate results.
- It significantly reduces the time and effort previously spent on manual image processing.
- Additionally, prompt optimization ensures better control over the results.
While generative AI has transformed my approach to media data extraction but OpenCV remains a valuable tool, particularly for foundational image processing tasks and real-time applications that require precise algorithmic control.
View Screenshots here.
Distributed under the MIT License. See LICENSE for more information.
OS: Ubuntu
System: Customized PC
Processor: Intel i5 13th gen
RAM: DDR5 16GB
Disk: NVMe 100GB
Akash A
Computer Science Engineer
akashcse2000@gmail.com
8608550403
Chennai, TN, India
Follow me on
