feature: include cost estimate on pdf view

Author: skeptrunedev

pdf2md/server/src/operators/s3.rs

@@ -45,7 +45,7 @@ pub async fn get_signed_url(bucket: &Bucket, key: &str) -> Result<String, Servic
     custom_queries.insert("response-content-encoding".into(), "utf-8".into());
 
     let url = bucket
-        .presign_get(key, 3600, Some(custom_queries))
+        .presign_get(key, 86400, Some(custom_queries))
         .await
         .map_err(|e| {
             log::error!("Could not get signed url {:?}", e);

pdf2md/server/src/templates/demo-ui.html

@@ -23,15 +23,15 @@
   id="upload-form-container"
   class="flex justify-center mt-[10vh] sm:mt-[20vh] items-center px-4"
 >
-  <form class="max-w-lg mx-auto">
+  <form class="max-w-2xl mx-auto">
     <div class="text-center">
       <h2
         class="text-balance text-4xl font-semibold tracking-tight text-gray-900 sm:text-5xl"
       >
         OCR With Intelligence
       </h2>
       <p class="mt-2 text-pretty text-lg/8 text-gray-700">
-        Convert any PDF to LLM-ready Markdown using vision models like GPT-4o.
+        Convert any PDF to LLM-ready Markdown using thrifty vision models like GPT-4o-mini and Gemini-flash-1.5.
       </p>
     </div>
     <button
@@ -75,10 +75,15 @@
         name="model"
         class="mt-2 block w-full rounded-md border-0 py-1.5 pl-3 pr-10 text-gray-900 bg-white ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-magenta-600 sm:text-sm/6"
       >
-        <option value="openai/gpt-4o-mini" selected>4o-mini</option>
-        <option value="openai/chatgpt-4o-latest">4o</option>
-        <option value="google/gemini-flash-1.5-8b">gemini-flash-1.5-8b</option>
-        <option value="google/gemini-flash-1.5">gemini-flash-1.5</option>
+        <option value="openai/gpt-4o-mini" selected>
+          4o-mini ($0.15/M input)
+        </option>
+        <option value="google/gemini-flash-1.5-8b">
+          gemini-flash-1.5-8b ($0.0375/M input)
+        </option>
+        <option value="google/gemini-flash-1.5">
+          gemini-flash-1.5 ($0.075/M input)
+        </option>
       </select>
       <label
         for="conversion-prompt"
@@ -134,11 +139,11 @@
     </div>
   </form>
 </div>
-<div class="px-4">
-  <div
-    id="result-container"
-    class="mt-10 sm:mt-14 md:mt-24 grid grid-cols-2 gap-4 max-w-screen-2xl mx-auto"
-  >
+<div class="px-4 mt-10 sm:mt-14 md:mt-24 max-w-screen-2xl mx-auto">
+  <div class="col-span-2 flex justify-between">
+    <p id="document-price" class="text-gray-600 text-sm/6"></p>
+  </div>
+  <div id="result-container" class="grid grid-cols-2 gap-4">
     <div id="my-pdf"></div>
     <div id="markdown-container" class="max-h-[75vh] overflow-y-auto"></div>
   </div>

pdf2md/server/static/output.css

@@ -570,6 +570,10 @@ video {
   position: relative;
 }
 
+.col-span-2 {
+  grid-column: span 2 / span 2;
+}
+
 .-mx-4 {
   margin-left: -1rem;
   margin-right: -1rem;
@@ -677,8 +681,8 @@ video {
   min-width: 100%;
 }
 
-.max-w-lg {
-  max-width: 32rem;
+.max-w-2xl {
+  max-width: 42rem;
 }
 
 .max-w-screen-2xl {

pdf2md/server/static/pdf2md.js

@@ -1,3 +1,18 @@
+const costsPerM = {
+  "openai/gpt-4o-mini": {
+    input_price: 0.15,
+    output_price: 0.6,
+  },
+  "google/gemini-flash-1.5-8b": {
+    input_price: 0.0375,
+    output_price: 0.15,
+  },
+  "google/gemini-flash-1.5": {
+    input_price: 0.075,
+    output_price: 0.3,
+  },
+};
+
 const defaultTableRowStr = `
     <td
       class="task-id whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-gray-900 sm:pl-0"
@@ -83,6 +98,9 @@ const displayTask = (task) => {
     task.pages_processed
   );
 
+  let completionTokens = 0;
+  let promptTokens = 0;
+
   sortedPages.forEach((page) => {
     const pageContainer = document.createElement("div");
     pageContainer.classList.add("page-container");
@@ -91,6 +109,9 @@ const displayTask = (task) => {
     const spacerDiv = document.createElement("div");
     spacerDiv.classList.add(...["my-4", "h-1", "bg-gray-700"]);
     markdownContainer.appendChild(spacerDiv);
+
+    promptTokens += page?.usage?.prompt_tokens || 0;
+    completionTokens += page?.usage?.completion_tokens || 0;
   });
   if (!sortedPages.length) {
     const pageContainer = document.createElement("div");
@@ -99,9 +120,33 @@ const displayTask = (task) => {
       "Your file is being converted. We are pinging the server every 5 seconds to check for status updates. See the table below for more detailed status information. Please be patient!";
     markdownContainer.appendChild(pageContainer);
   }
+
+  const modelSelect = document.getElementById("model");
+  const model = modelSelect.options[modelSelect.selectedIndex].value;
+  const costPerM = costsPerM[model];
+  const completionCost = (completionTokens * costPerM.output_price) / 1000000;
+  const promptCost = (promptTokens * costPerM.input_price) / 1000000;
+  document.getElementById("document-price").innerText =
+    `Cost: ${new Intl.NumberFormat("en-US", {
+      style: "currency",
+      currency: "USD",
+      minimumFractionDigits: 5,
+    }).format(promptCost)} (Prompt) + ${new Intl.NumberFormat("en-US", {
+      style: "currency",
+      currency: "USD",
+      minimumFractionDigits: 5,
+    }).format(completionCost)} (Completion) = ${new Intl.NumberFormat("en-US", {
+      style: "currency",
+      currency: "USD",
+      minimumFractionDigits: 5,
+    }).format(completionCost + promptCost)}`;
 };
 
 const getTaskPages = async (taskId, taskIdToDisplay) => {
+  if (!taskId) {
+    return;
+  }
+
   try {
     let paginationToken = "";
     let task = null;
@@ -119,7 +164,7 @@ const getTaskPages = async (taskId, taskIdToDisplay) => {
       );
       const taskWithPages = await resp.json();
       task = taskWithPages;
-      pages.push(...taskWithPages.pages);
+      pages.push(...(taskWithPages.pages || []));
       paginationToken = taskWithPages.pagination_token;
       if (!paginationToken) {
         break;
@@ -243,13 +288,13 @@ const updateTaskStatusTable = () => {
     row.querySelector(".task-id").innerText = task.id;
     row.querySelector(".task-file-name").innerText = task.file_name;
     row.querySelector(".task-status").innerText =
-      task.status.toLowerCase() === "completed"
+      task.status?.toLowerCase() === "completed"
         ? task.status
         : `${task.status} | Please wait. Checking for updates every 5 seconds.`;
     row
       .querySelector(".task-status")
       .classList.add(
-        `status-${task.status.split(" ").join("-").toLowerCase()}`
+        `status-${task.status?.split(" ").join("-").toLowerCase()}`
       );
     row.querySelector(".task-prompt-tokens").innerText = promptTokens;
     row.querySelector(".task-completion-tokens").innerText = completionTokens;
@@ -282,7 +327,7 @@ const refreshTasks = () => {
   const taskIdToDisplay = url.searchParams.get("taskId");
   tasks.forEach((task) => {
     if (
-      task.status.toLowerCase() === "completed" &&
+      task.status?.toLowerCase() === "completed" &&
       task.pages &&
       task.pages.length
     ) {