Give me a chatgpt like interface which is capable of ingesting files, either PDF or PPT. The interface should be able to display each page and users can select a specific page and a space where they can provide a prompt and how the responses should be; the right hand pane should then be able to display the output (For example, if I select a page and provide a prompt like - "Elaborate the infographics on the page and return responses as json" The Right side pane should give that JSON which users can view. Also give provision to preview images of pages of the uploaded files. It can be saved as JPEG and then previewed. Within the code provide a section where we can integrate our own vision model like Claude 3.5 sonnet
I'll create a ChatGPT-like interface with the capabilities you've described. This interface will allow users to upload PDF or PPT files, display page previews, select specific pages, provide prompts, and view the output in a right-hand pane. We'll also include a section where you can integrate your own vision model, such as Claude 3.5 Sonnet.
Let's break this down into components and create a React project using Next.js and the AI SDK. We'll use the App Router for this project.
Now, let's create the React project with the necessary components: