implement document view page

docker-compose.yml

@@ -5,7 +5,6 @@ services:
       - 5672:5672
       - 15672:15672
 
-
   vllm:
     image: vllm/vllm-openai:latest
     command: "--model Qwen/Qwen2-VL-2B-Instruct-GPTQ-Int4 --quantization gptq "

penparse/penparse/settings.py

@@ -149,6 +149,7 @@ CELERY_BROKER_URL = "amqp://guest:guest@localhost/"
 
 
 OPENAI_API_BASE = os.getenv("OPENAI_API_BASE")
-#OPENAI_API_KEY = os.getenv("OPENAI_API_KEY")
-OPENAI_API_KEY = "test"
+OPENAI_API_KEY = os.getenv("OPENAI_API_KEY")
+#OPENAI_API_KEY = "test"
 OPENAI_MODEL = os.getenv("OPENAI_MODEL", "openai/gpt-4o")
+#OPENAI_MODEL="ollama/llama3.2-vision"

penparse/webui/migrations/0006_imagememo_model_name.py

@@ -0,0 +1,18 @@
+# Generated by Django 4.2.16 on 2024-12-15 06:34
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('webui', '0005_imagememo_error_message'),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name='imagememo',
+            name='model_name',
+            field=models.CharField(max_length=255, null=True),
+        ),
+    ]

penparse/webui/models.py

@@ -3,6 +3,7 @@ from django.contrib.auth.base_user import BaseUserManager
 from django.db import models
 
 from uuid import uuid4
+from email.header import Charset
 
 
 class UserManager(BaseUserManager):
@@ -58,6 +59,8 @@ class ImageMemo(models.Model):
 
     author = models.ForeignKey("User", on_delete=models.CASCADE, related_name="memos")
 
+    model_name = models.CharField(max_length=255, null=True)
+
     created_at = models.DateTimeField(auto_now_add=True)
     updated_at = models.DateTimeField(
         auto_now=True,

penparse/webui/tasks.py

@@ -16,6 +16,12 @@ If any words or letters are unclear, denote them  with a '?<word>?'.
 
 For example if you were not sure whether a word is blow or blew you would transcribe it as '?blow?'
 
+If a text is underlined followed by a newline that indicates that it is a header. Use markdown H2 to denote it as such.
+
+Make sure to add 2 newlines newlines between sections.
+
+Anything that looks visually like a bullet point should be treated as such. This includes lines starting with hyphens. Replace bullet point indicators with * in the interpretted text.
+
 Please include whitespace and formatting for headings too.
 """
 

penparse/webui/templates/document.html

@@ -23,17 +23,23 @@
                             </tr>
                             <tr>
                                 <td class="font-medium pr-4">Created:</td>
-                <td class="text-gray-600">{{ document.created_at|date:"d/m/Y H:i" }}</td>
+                                <td class="text-gray-600">
+                                    {{ document.created_at|date:"d/m/Y H:i:s" }}
+                                </td>
                             </tr>
                             <tr>
                                 <td class="font-medium pr-4">Updated:</td>
-                <td class="text-gray-600">{{ document.updated_at|date:"d/m/Y H:i" }}</td>
+                                <td class="text-gray-600">
+                                    {{ document.updated_at|date:"d/m/Y H:i:s" }}
+                                </td>
                             </tr>
                         </table>
                     </div>
                     <div class="prose max-w-full">
                         <div class="flex justify-between items-center mb-3">
-              <h3 class="text-xl font-semibold text-gray-800">Content:</h3>
+                            <h3 class="text-xl font-semibold text-gray-800">
+                                Content:
+                            </h3>
                             <button
                                 id="copyButton"
                                 class="bg-gray-200 text-gray-700 px-3 py-1 rounded-md hover:bg-gray-300 transition duration-300 flex items-center text-sm"
@@ -55,10 +61,15 @@
                                 Copy to Clipboard
                             </button>
                         </div>
-            <div id="markdown-rendered" class="bg-gray-50 p-4 rounded-md">
-              {{ document.content|markdown }}
+                        <div
+                            id="markdown-rendered"
+                            class="bg-gray-50 p-4 rounded-md"
+                        >
+                            {{ markup|safe }}
+                        </div>
+                        <div id="markdown-content" class="hidden">
+                            {{ document.content}}
                         </div>
-            <div id="markdown-content" class="hidden">{{ document.content}}</div>
                     </div>
                     <div class="mt-8 flex space-x-4">
                         <a
@@ -149,7 +160,9 @@
 <script>
     document.addEventListener("DOMContentLoaded", (event) => {
         // Syntax highlighting
-    document.querySelectorAll("#markdown-content pre code").forEach((block) => {
+        document
+            .querySelectorAll("#markdown-content pre code")
+            .forEach((block) => {
                 hljs.highlightElement(block);
             });
 
@@ -168,8 +181,14 @@
                     setTimeout(() => {
                         copyButton.innerHTML =
                             '<svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"></path></svg>Copy to Clipboard';
-            copyButton.classList.remove("bg-green-500", "text-white");
-            copyButton.classList.add("bg-gray-200", "text-gray-700");
+                        copyButton.classList.remove(
+                            "bg-green-500",
+                            "text-white",
+                        );
+                        copyButton.classList.add(
+                            "bg-gray-200",
+                            "text-gray-700",
+                        );
                     }, 2000);
                 })
                 .catch((err) => {

penparse/webui/views/__init__.py

@@ -1,5 +1,6 @@
 import logging
 import os
+import markdown
 
 from django.contrib import messages
 from django.shortcuts import redirect, render
@@ -61,13 +62,15 @@ def view_document(request: HttpRequest, pk: str):
     # find document with given ID (pk path param) and current user id
     document = ImageMemo.objects.filter(id=pk, author__id=request.user.id).first()
 
+    doc_markup = markdown.markdown(document.content)
+
     if not document:
         logger.debug(f"No memo found for user={request.user.id} and memo_id={pk}")
         return HttpResponse(content="Document not found", status=404)
 
 
 
-    return render(request, "document.html", context={"document": document})
+    return render(request, "document.html", context={"document": document, "markup": doc_markup})
 
 
 @login_required

pyproject.toml

@@ -11,6 +11,7 @@ dependencies = [
     "django>=4.2.16",
     "litellm>=1.54.1",
     "loguru>=0.7.3",
+    "markdown>=3.7",
     "pillow>=11.0.0",
     "pytest-django>=4.9.0",
     "pytest-loguru>=0.4.0",

uv.lock

@@ -1002,6 +1002,7 @@ dependencies = [
     { name = "django-markdownify" },
     { name = "litellm" },
     { name = "loguru" },
+    { name = "markdown" },
     { name = "pillow" },
     { name = "pytest" },
     { name = "pytest-django" },
@@ -1018,6 +1019,7 @@ requires-dist = [
     { name = "django-markdownify", specifier = ">=0.9.5" },
     { name = "litellm", specifier = ">=1.54.1" },
     { name = "loguru", specifier = ">=0.7.3" },
+    { name = "markdown", specifier = ">=3.7" },
     { name = "pillow", specifier = ">=11.0.0" },
     { name = "pytest", specifier = ">=8.3.4" },
     { name = "pytest-django", specifier = ">=4.9.0" },