Update app.py

app.py

@@ -1,104 +1,159 @@
-import os
+import solara, ipyreact
+from pathlib import Path
+import base64
+import requests
 
-import solara
-from solara_enterprise import auth
-from reacton import ipyvuetify as rv
-from functools import partial
-
-os.environ['SOLARA_OAUTH_API_BASE_URL']="dev-r2bw2n3hwf72bni6.us.auth0.com"  # replace with your domain
-os.environ['SOLARA_OAUTH_CLIENT_ID']="lQl2yjR7dr7XVbK480OJ2sfgoWf6U7s2"  # replace with your client ID
-os.environ['SOLARA_OAUTH_CLIENT_SECRET']="BsGtc_GLEZgsv4DsZnSya4YhB38nm7ohJp5kobfOVb2X8CeT9XTHMOxnXR_djQMd"  # not shown here, replace with your client secret
-os.environ['SOLARA_BASE_URL']='https://scrapalot-ebti.hf.space'
-os.environ['REPLICATE_API_TOKEN']='r8_YSD53gSw5IQbT8Fmnekc8ypEIuy28wN4IG45C'
+def pdf_url_to_base64(url):
+    response = requests.get(url)
+    if response.status_code == 200:
+        pdf_bytes = response.content
+        base64_encoded = base64.b64encode(pdf_bytes).decode("utf-8")
+        return base64_encoded
+    else:
+        print("Failed to fetch PDF from URL:", url)
+        return None
 
-import replicate
 
-@solara.component
-def Message(message):
-    icon = "mdi-robot" if message['user']=='Assistant' else 'mdi-account'
-    icon = rv.Icon(children=[icon])
-    user = rv.CardTitle(icon=icon,children=[solara.Columns([0.6,2,10],children=[icon,message['user'],rv.Spacer()])])
-    text = rv.CardText(children=[message['text']])
-    messageDiv = rv.Card(_class="mx-auto",width="100%",flat=True,children=[user,text])
-    return messageDiv
-
-def Redo():
-    message = messages.value[-2]['text']
-    messages.set(messages.value[:-2])
-    sendMessage(message)
+ipyreact.define_module("ts-pdf", Path("./ts-pdf.mjs"))
+ipyreact.define_import_map({
+    "pdfjs-dist": "https://esm.sh/pdfjs-dist@2.16.105/build/pdf.worker.js",
+})
 
 @solara.component
-def InputText():
-    InputText = solara.InputText("Enter some text",value=input_text)
-    rv.use_event(InputText,"keypress",partial(handleEnter))
-    InputText
-
-def sendMessage(message):
-    if auth.user.value:
-        name = str(auth.user.value['userinfo']['name']).split(" ")[0]
+def PDFViewer(type,pdf):
+    if type=="bytes":
+        pdf_bytes=pdf
     else:
-        name = 'user'
-    messages.set(messages.value+[{'user':name,'text':message}])
-    prompt.value += f"[INST] {message} [/INST] \n"
-    messages.set(messages.value+[{'user':'Assistant','text':''}])
-    response = ''
-    for token in replicate.stream(
-        "meta/llama-2-7b-chat",
-        input={
-            "debug": False,
-            "top_p": 1,
-            "prompt": prompt.value,
-            "temperature": 0.75,
-            "system_prompt": f"You are a helpful, respectful and honest assistant. You are tasked with helping {name} with figuring out the correct European Binding Tariff Information for their shipment. Please address them by their name and their needs.",
-            "max_new_tokens": 800,
-            "min_new_tokens": -1,
-            "prompt_template": "[INST] <<SYS>>\n{system_prompt}\n<</SYS>>\n\n{prompt} [/INST]",
-            "repetition_penalty": 1
-        },
-    ):
-        response += str(token)
-        messages.set(messages.value[:-1]+[{'user':'Assistant', 'text':response}])
-    prompt.value += f"{messages.value[-1]['text']}"
-    print('Boom')
+        pdf_bytes=pdf_url_to_base64(pdf)
         
+    app = ipyreact.ValueWidget(_esm=
+        """
+      import React, { useEffect } from 'react';
+      import { AnnotEventDetail, CustomStampEventDetail, TsPdfViewer, TsPdfViewerOptions } from 'ts-pdf';
 
-def handleEnter(*args):
-    if str(args[2]['key'])=='Enter':
-        message = args[0].v_model
-        print(message)
-        input_text.set('')
-        sendMessage(message)
+      const PdfViewerComponent = () => {
+        useEffect(() => {
+          const mobileVhHack = () => {
+            const vh = window.innerHeight * 0.01;
+            document.documentElement.style.setProperty('--vh', `${vh}px`);
+          };
 
+          mobileVhHack();
+          window.addEventListener("resize", mobileVhHack);
 
-prompt = solara.reactive('')
-messages = solara.reactive([])
-input_text = solara.reactive('')
+          return () => {
+            window.removeEventListener("resize", mobileVhHack);
+          };
+        }, []);
+
+        var arrayBuffer = base64ToArrayBuffer('"""+pdf_bytes+"""');
+
+        function base64ToArrayBuffer(base64) {
+            var binaryString = window.atob(base64);
+            var binaryLen = binaryString.length;
+            var bytes = new Uint8Array(binaryLen);
+            for (var i = 0; i < binaryLen; i++) {
+                var ascii = binaryString.charCodeAt(i);
+                bytes[i] = ascii;
+            }
+            return bytes;
+        }
+        var blob = new Blob([arrayBuffer], {type: "application/pdf"});
+        var link = window.URL.createObjectURL(blob);
+
+        useEffect(() => {
+          const run = async () => {
+            const options: TsPdfViewerOptions = {
+              containerSelector: "#pdf-main-container",
+              workerSource: "https://cdn.jsdelivr.net/npm/pdfjs-dist@2.16.105/build/pdf.worker.js",
+              userName: "corran",
+              fileButtons: ["close", "save"],
+              comparableFileButtons: ["open", "close"],
+              annotChangeCallback: (detail: AnnotEventDetail) => {
+                if (detail.type === "focus" || detail.type === "select" || detail.type === "render") {
+                  return;
+                }
+                console.log(detail);
+              },
+              customStampChangeCallback: (detail: CustomStampEventDetail) => {
+                // console.log(JSON.stringify(detail.stamp));
+              },
+            };
+            const viewer = new TsPdfViewer(options);
+            // viewer.importAnnotationsFromJson(dtos);
+            // }, 5000);
+            // for debug
+            window["pdfViewer"] = viewer;
+            await viewer.openPdfAsync(link);
+          };
+
+          run();
+
+          // Clean up function
+          return () => {
+            // Perform any cleanup of the effect here
+          };
+        }, []);
+
+        return (
+            <div style={{
+            position: "relative",
+            minWidth: "320px",
+            width: "100vw",
+            height: "calc(var(--vh, 1vh) * 100)",
+            margin: "0",
+            backgroundColor: "var(--tspdf-color-bg)",
+            transition: "height .25s ease"
+          }}>
+            <style>
+              {`
+                .abs-stretch {
+                  position: absolute;
+                  top: 0;
+                  left: 0;
+                  width: 100%;
+                  height: 100%;
+                }
+              `}
+            </style>
+            <div className="test-container abs-stretch">
+              <div id="pdf-main-container" className="abs-stretch">
+                {/* Your PDF content will be rendered here */}
+              </div>
+            </div>
+          </div>
+        );
+      };
+
+      export default PdfViewerComponent;
+""")
+    solara.display(app)
 
-@solara.component
-def ColumnLayout(children):
-    solara.Columns([2,6,2],children=[solara.Column(),solara.Column(children),solara.Column()])
-    
 
 @solara.component
-def Page():
-
-    with solara.AppLayout(title="EBTI GPT"):
-        solara.AppBarTitle(children=[])
-        with rv.Card(flat=True):
-            with ColumnLayout():
-                if not auth.user.value:
-                    solara.Markdown(f"### Please Login ")
-                    solara.Button("Login", icon_name="mdi-login", href="/_solara/auth/login?redirect_uri=https%3A//scrapalot-ebti.hf.space/")
-                else:
-                    userinfo = auth.user.value['userinfo']
-                    if 'name' in userinfo:
-                        solara.Markdown(f"### Welcome {userinfo['name']}")
-            with ColumnLayout():
-                rv.Card(flat=True,children=[Message(message) for message in messages.value])
-            with ColumnLayout():
-                InputText()
-
-            if auth.user.value:
-                with ColumnLayout():
-                    solara.Button("Logout", icon_name="mdi-logout", href=auth.get_logout_url())
-Page()
+def Reader():
+      solara.Style("""
+                   #app > div > div:nth-child(2) >
+                   div:nth-child(2){
+                    display: none;
+                   }
+                   """)
+      router = solara.use_router()
+      path = router.path
+      if "bytes=" in path:
+        data=path.split("bytes=")[-1]
+        PDFViewer("bytes",data)
+      elif "url=" in path:
+        data=path.split("url=")[-1]
+        PDFViewer("url",data)
+      else:
+          solara.Markdown("Invalid PDF")
+          solara.Markdown(path)
+
+routes = [
+    solara.Route(
+        "reader",
+        component=Reader,
+    ),
+]
+Reader()