Merge branch 'master' into master

README.md

@@ -37,6 +37,62 @@ The architecture of the project follows the Next.js framework, which enables ser
 
 The front-end is implemented using Next.js, allowing for efficient rendering and responsiveness. The user interface is designed to be intuitive and user-friendly, ensuring a smooth experience throughout the storytelling process.
 
+### Usage
+
+1. Start the development server:
+   ```bash
+   npm run dev
+3. Access the application locally:
+   ```bash
+   http://localhost:3000
+
+## API Integration
+
+The project integrates several APIs to provide the desired functionalities:
+
+-**Google Cloud Vision**: Used for image analysis and processing of uploaded images.
+
+-**ChatGPT API**: Employs the GPT-3.5 model to generate story prompts based on user-uploaded files.
+
+-**DALL-E 2 API**: Utilized to create anime-style pictures that accompany the story prompts.
+
+-**Eleven Labs API**: Converts text prompts into voice recordings for an enhanced auditory experience.
+
+To integrate these APIs, obtain the necessary API keys and configure them in the project's settings.
+
+
+### Example: 
+
+
+
+
+If I sent the images to
+```bash
+var options = {
+  method: 'POST',
+  url: 'http://localhost:3000/api/chat',
+  headers: {
+    'Content-Type': 'application/json',
+    Authorization: 'Bearer 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'
+  },
+  data: {
+    messages: [
+      {role: 'system', content: 'tour'},
+      {role: 'user', content: 'My Last Tour at Sylhet'},
+      {
+        role: 'user',
+        content: 'Image 1 contains: Scenic Picturesque Lush Serene Green Crystal-clear Tropical Vibrant Captivating Tranquil'
+      }
+    ],
+    model: 'gpt-3.5-turbo'
+  }
+};
+```
+
+
+
+
+
 ## Getting Started
 
 Follow these instructions to set up the project locally on your machine.
@@ -65,28 +121,6 @@ To run the project, ensure that you have the following installed:
 3. Obtain API keys for Google Cloud Vision, ChatGPT, DALL-E 2, and Eleven Labs.
 4. Add the API keys to the project's configuration files.
 
-### Usage
-
-1. Start the development server:
-   ```bash
-   npm run dev
-3. Access the application locally:
-   ```bash
-   http://localhost:3000
-
-## API Integration
-
-The project integrates several APIs to provide the desired functionalities:
-
--**Google Cloud Vision**: Used for image analysis and processing of uploaded images.
-
--**ChatGPT API**: Employs the GPT-3.5 model to generate story prompts based on user-uploaded files.
-
--**DALL-E 2 API**: Utilized to create anime-style pictures that accompany the story prompts.
-
--**Eleven Labs API**: Converts text prompts into voice recordings for an enhanced auditory experience.
-
-To integrate these APIs, obtain the necessary API keys and configure them in the project's settings.
 
 ## Contributing
 

components/ApplicationBar.tsx

@@ -130,18 +130,14 @@ export function ApplicationBar(props: {
           ...(props.sx || {}),
         }}
       >
-
-          <IconButton variant="plain" onClick={(event) => setPagesMenuAnchor(event.currentTarget)}>        
-
+        <IconButton variant="plain" onClick={(event) => setPagesMenuAnchor(event.currentTarget)}>
           <div className="banner-container mx-auto">
             <img className="banner" src="https://i.ibb.co/Lg2ctwf/megh-gpt.gif" alt="Story-Verse-1" />
           </div>
-          </IconButton>
-
+        </IconButton>
 
         <IconButton variant="plain" onClick={(event) => setPagesMenuAnchor(event.currentTarget)}></IconButton>
 
-
         <Stack direction="row" sx={{ my: 'auto' }}>
           {/* {chatModelId && <StyledDropdown items={ChatModels} value={chatModelId} onChange={handleChatModelChange} />} */}
 
@@ -162,27 +158,14 @@ export function ApplicationBar(props: {
             fontWeight: 'bold',
             alignItems: 'items-center',
           }}
+
           >
-            {' '}
             <Link href="/bookvarse" target="_blank">
               Go to StoryVerse
             </Link>{' '}
           </button>
         </Stack>
-
       </Sheet>
-
-      {/* Left menu */}
-      {/* {<PagesMenu conversationId={props.conversationId} pagesMenuAnchor={pagesMenuAnchor} onClose={closePagesMenu} />} */}
-
-      {/* Confirmations */}
-      <ConfirmationModal
-        open={!!clearConfirmationId}
-        onClose={() => setClearConfirmationId(null)}
-        onPositive={handleSignOut}
-        confirmationText={'Are you sure you want to log out ?'}
-        positiveActionText={'Log Out'}
-      />
     </>
   );
 }

components/ChatMessage.tsx

@@ -52,8 +52,9 @@ import { prettyBaseModel } from '@/lib/publish';
 import { requireUserKeyElevenLabs } from '@/components/dialogs/SettingsModal';
 import { speakText } from '@/lib/text-to-speech';
 import { useSettingsStore } from '@/lib/store-settings';
-import { Person, Person2Outlined, Person4Rounded } from '@mui/icons-material';
+import { Download, Person, Person2Outlined, Person4Rounded, Share } from '@mui/icons-material';
 import RenderImage from './RenderImage';
+import axios from 'axios';
 
 /// Utilities to parse messages into blocks of text and code
 
@@ -393,12 +394,90 @@ export function ChatMessage(props: {
 
   const closeOperationsMenu = () => setMenuAnchor(null);
 
+  function downloadPdf(url: string) {
+    console.log(url);
+    const link = document.createElement('a');
+    link.href = url;
+    link.download = url.substring(url.lastIndexOf('/') + 1);
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+  }
+
   const handleMenuCopy = (e: React.MouseEvent) => {
     copyToClipboard(messageText);
     e.preventDefault();
     closeOperationsMenu();
   };
 
+  const generatePdf = async (e: React.MouseEvent) => {
+    e.preventDefault();
+
+    const html = messageText;
+
+    try {
+      const response = await fetch('/api/generatePdf', {
+        method: 'POST',
+        body: JSON.stringify({ html }),
+        headers: {
+          'Content-Type': 'application/json',
+        },
+      });
+
+      if (!response.ok) {
+        throw new Error('Failed to generate PDF');
+      }
+
+      const { url } = await response.json();
+
+      console.log(url);
+
+      downloadPdf(url);
+    } catch (error) {
+      console.error('Error generating PDF:', error);
+    }
+
+    closeOperationsMenu();
+  };
+
+  const sharePdf = async (e: React.MouseEvent) => {
+    e.preventDefault();
+
+    const html = messageText;
+
+    try {
+      const response = await fetch('/api/generatePdf', {
+        method: 'POST',
+        body: JSON.stringify({ html }),
+        headers: {
+          'Content-Type': 'application/json',
+        },
+      });
+
+      if (!response.ok) {
+        throw new Error('Failed to generate PDF');
+      }
+
+      const { url } = await response.json();
+
+      console.log(url);
+
+      axios
+        .post('/api/publish_book', { messageText, url })
+        .then((response) => {
+          alert('Book Shared !');
+        })
+        .catch((error) => {
+          console.error('Error updating book visibility:', error);
+          // Handle error
+        });
+    } catch (error) {
+      console.error('Error generating PDF:', error);
+    }
+
+    closeOperationsMenu();
+  };
+
   const handleMenuSpeak = async (e: React.MouseEvent) => {
     e.preventDefault();
     await speakText(messageText);
@@ -411,11 +490,6 @@ export function ChatMessage(props: {
     closeOperationsMenu();
   };
 
-  const handleTextEdited = (editedText: string) => {
-    setIsEditing(false);
-    if (editedText?.trim() && editedText !== messageText) props.onMessageEdit(editedText);
-  };
-
   const handleExpand = () => setForceExpanded(true);
 
   // soft error handling
@@ -602,16 +676,29 @@ export function ChatMessage(props: {
 
       {/* Message Operations menu */}
       {!!menuAnchor && (
-        <Menu variant="plain" color="neutral" size="sm" placement="auto" sx={{ minWidth: 60 }} open anchorEl={menuAnchor} onClose={closeOperationsMenu}>
+        <Menu variant="plain" color="neutral" size="sm" placement="auto" sx={{ minWidth: 120 }} open anchorEl={menuAnchor} onClose={closeOperationsMenu}>
+          <MenuItem onClick={generatePdf}>
+            <ListItemDecorator>
+              <Download /> Generate PDF
+            </ListItemDecorator>
+          </MenuItem>
+
+          <MenuItem onClick={sharePdf}>
+            <ListItemDecorator>
+              <Share /> Share to StoryVerse
+            </ListItemDecorator>
+          </MenuItem>
+
           <MenuItem onClick={handleMenuCopy}>
             <ListItemDecorator>
-              <ContentCopyIcon />
+              <ContentCopyIcon /> Copy
             </ListItemDecorator>
           </MenuItem>
+
           {isSpeakable && (
             <MenuItem onClick={handleMenuSpeak}>
               <ListItemDecorator>
-                <RecordVoiceOverIcon />
+                <RecordVoiceOverIcon /> Speak
               </ListItemDecorator>
             </MenuItem>
           )}

components/ChatMessageList.tsx

@@ -68,6 +68,7 @@ export function ChatMessageList(props: {
           <ChatMessage
             key={'msg-' + message.id}
             message={message}
+
             isLast={idx === filteredMessages.length - 1}
             onMessageDelete={() => handleMessageDelete(message.id)}
             onMessageEdit={(newText) => handleMessageEdit(message.id, newText)}