Skip to content

Commit

Permalink
feature: include advanced options form for pdf2md
Browse files Browse the repository at this point in the history
  • Loading branch information
@skeptrunedev @cdxker
skeptrunedev authored and cdxker committed Nov 20, 2024
1 parent e7a061c commit 29451a5
Show file tree
Hide file tree
Showing 5 changed files with 210 additions and 22 deletions.
2 changes: 1 addition & 1 deletion pdf2md/server/src/models.rs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -74,7 +74,7 @@ pub struct UploadFileReqPayload {
pub llm_api_key: Option<String>,
/// The System prompt that will be used for the conversion of the file.
pub system_prompt: Option<String>,
/// Optional webhook URL to receive notifications for each page processed.
/// Optional webhook URL to receive notifications for each page processed. Default is 'Convert the following PDF page to markdown. Return only the markdown with no explanation text. Do not exclude any content from the page.'
pub webhook_url: Option<String>,
/// Optional webhook payload template with placeholder values.
/// Supports the following template variables:
Expand Down
72 changes: 67 additions & 5 deletions pdf2md/server/src/templates/demo-ui.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,20 +21,82 @@
{% endblock %} {% block body %}
<div
id="upload-form-container"
class="flex justify-center h-[75vh] items-center px-4"
class="flex justify-center mt-[10vh] sm:mt-[20vh] items-center px-4"
>
<form class="max-w-md mx-auto">
<form class="max-w-lg 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-600">
<p class="mt-2 text-pretty text-lg/8 text-gray-700">
Convert any PDF to LLM-ready Markdown using latest-gen vision models
like GPT-4o.
</p>
</div>
<button
id="expand-advanced-options"
class="w-full flex justify-center items-center gap-x-2 my-2 text-gray-600 text-sm/5"
>
<p>Advanced Options: Change Model + Prompt</p>
<svg
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
fill="currentColor"
class="bi bi-chevron-down"
viewBox="0 0 16 16"
>
<path
fill-rule="evenodd"
d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708"
/>
</svg>
<svg
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
fill="currentColor"
class="bi bi-chevron-up hidden"
viewBox="0 0 16 16"
>
<path
fill-rule="evenodd"
d="M7.646 4.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1-.708.708L8 5.707l-5.646 5.647a.5.5 0 0 1-.708-.708z"
/>
</svg>
</button>
<div id="advanced-options-inputs" class="hidden">
<label for="model" class="block text-sm/6 font-medium text-gray-900"
>Model</label
>
<select
id="model"
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>
</select>
<label
for="conversion-prompt"
class="block text-sm/6 font-medium text-gray-900 mt-2"
>Conversion prompt</label
>
<div class="mt-2">
<textarea
rows="4"
name="conversion-prompt"
id="conversion-prompt"
class="block w-full rounded-md border-0 p-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-magenta-600 sm:text-sm/6"
>
Convert the following PDF page to markdown. Return only the markdown with no explanation text. Do not exclude any content from the page.</textarea
>
</div>
</div>
<div
class="mt-4 flex justify-center rounded-lg border border-dashed border-gray-900/25 px-6 py-10"
>
Expand Down Expand Up @@ -76,7 +138,7 @@
<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-7xl mx-auto"
class="mt-10 sm:mt-14 md:mt-24 grid grid-cols-2 gap-4 max-w-screen-2xl mx-auto"
>
<div id="my-pdf"></div>
<div id="markdown-container" class="max-h-[75vh] overflow-y-auto"></div>
Expand All @@ -88,7 +150,7 @@
</div>
<div
id="task-status-table-container"
class="my-12 sm:my-24 md:my-50 max-w-7xl mx-auto hidden px-8"
class="my-12 sm:my-24 md:my-50 max-w-screen-2xl mx-auto hidden px-8"
>
<div class="-mx-4 -my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
<div class="inline-block min-w-full py-2 align-middle sm:px-6 lg:px-8">
Expand Down
15 changes: 9 additions & 6 deletions pdf2md/server/src/templates/skeleton.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,14 +53,10 @@
{% block navbar %}
<header class="bg-white">
<nav
class="mx-auto flex max-w-7xl items-center justify-between p-6 lg:px-8 flex-wrap"
class="mx-auto flex max-w-screen-2xl items-center justify-between p-6 lg:px-8 flex-wrap"
aria-label="Global"
>
<a
class="flex items-center hover:text-magenta-500"
href="https://trieve.ai"
target="_blank"
>
<a class="flex items-center hover:text-magenta-500" href="/">
<span
class="self-center text-lg md:text-2xl font-medium whitespace-nowrap"
>
Expand All @@ -73,6 +69,13 @@
</span>
</a>
<div class="flex gap-x-4 gap-y-6 lg:gap-x-12 flex-wrap">
<a
href="/redoc"
class="text-sm/6 font-semibold text-gray-900 hover:text-magenta-500"
target="_blank"
>
API reference
</a>
<a
href="mailto:[email protected]"
class="text-sm/6 font-semibold text-gray-900 hover:text-magenta-500"
Expand Down
112 changes: 104 additions & 8 deletions pdf2md/server/static/output.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -590,6 +590,11 @@ video {
margin-bottom: 3rem;
}

.my-2 {
margin-top: 0.5rem;
margin-bottom: 0.5rem;
}

.my-4 {
margin-top: 1rem;
margin-bottom: 1rem;
Expand All @@ -607,6 +612,10 @@ video {
margin-top: 1rem;
}

.mt-\[10vh\] {
margin-top: 10vh;
}

.block {
display: block;
}
Expand Down Expand Up @@ -652,10 +661,6 @@ video {
height: 3rem;
}

.h-\[75vh\] {
height: 75vh;
}

.max-h-\[75vh\] {
max-height: 75vh;
}
Expand All @@ -664,16 +669,20 @@ video {
width: 3rem;
}

.w-full {
width: 100%;
}

.min-w-full {
min-width: 100%;
}

.max-w-7xl {
max-width: 80rem;
.max-w-lg {
max-width: 32rem;
}

.max-w-md {
max-width: 28rem;
.max-w-screen-2xl {
max-width: 1536px;
}

@keyframes pulse {
Expand Down Expand Up @@ -714,6 +723,11 @@ video {
gap: 1rem;
}

.gap-x-2 {
-moz-column-gap: 0.5rem;
column-gap: 0.5rem;
}

.gap-x-4 {
-moz-column-gap: 1rem;
column-gap: 1rem;
Expand Down Expand Up @@ -775,6 +789,10 @@ video {
border-width: 1px;
}

.border-0 {
border-width: 0px;
}

.border-dashed {
border-style: dashed;
}
Expand All @@ -798,6 +816,10 @@ video {
background-color: rgb(255 255 255 / var(--tw-bg-opacity));
}

.p-1\.5 {
padding: 0.375rem;
}

.p-6 {
padding: 1.5rem;
}
Expand Down Expand Up @@ -826,6 +848,11 @@ video {
padding-right: 2rem;
}

.py-1\.5 {
padding-top: 0.375rem;
padding-bottom: 0.375rem;
}

.py-10 {
padding-top: 2.5rem;
padding-bottom: 2.5rem;
Expand Down Expand Up @@ -858,6 +885,10 @@ video {
padding-left: 1rem;
}

.pr-10 {
padding-right: 2.5rem;
}

.pr-3 {
padding-right: 0.75rem;
}
Expand Down Expand Up @@ -906,6 +937,11 @@ video {
line-height: 1.25rem;
}

.text-sm\/5 {
font-size: 0.875rem;
line-height: 1.25rem;
}

.text-sm\/6 {
font-size: 0.875rem;
line-height: 1.5rem;
Expand Down Expand Up @@ -943,6 +979,11 @@ video {
color: rgb(75 85 99 / var(--tw-text-opacity));
}

.text-gray-700 {
--tw-text-opacity: 1;
color: rgb(55 65 81 / var(--tw-text-opacity));
}

.text-gray-900 {
--tw-text-opacity: 1;
color: rgb(17 24 39 / var(--tw-text-opacity));
Expand All @@ -953,6 +994,37 @@ video {
color: rgb(125 48 139 / var(--tw-text-opacity));
}

.shadow-sm {
--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.ring-1 {
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.ring-inset {
--tw-ring-inset: inset;
}

.ring-gray-300 {
--tw-ring-opacity: 1;
--tw-ring-color: rgb(209 213 219 / var(--tw-ring-opacity));
}

.placeholder\:text-gray-400::-moz-placeholder {
--tw-text-opacity: 1;
color: rgb(156 163 175 / var(--tw-text-opacity));
}

.placeholder\:text-gray-400::placeholder {
--tw-text-opacity: 1;
color: rgb(156 163 175 / var(--tw-text-opacity));
}

.focus-within\:outline-none:focus-within {
outline: 2px solid transparent;
outline-offset: 2px;
Expand Down Expand Up @@ -983,6 +1055,21 @@ video {
color: rgb(12 5 14 / var(--tw-text-opacity));
}

.focus\:ring-2:focus {
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.focus\:ring-inset:focus {
--tw-ring-inset: inset;
}

.focus\:ring-magenta-600:focus {
--tw-ring-opacity: 1;
--tw-ring-color: rgb(125 48 139 / var(--tw-ring-opacity));
}

@media (min-width: 640px) {
.sm\:-mx-6 {
margin-left: -1.5rem;
Expand All @@ -998,6 +1085,10 @@ video {
margin-top: 3.5rem;
}

.sm\:mt-\[20vh\] {
margin-top: 20vh;
}

.sm\:px-6 {
padding-left: 1.5rem;
padding-right: 1.5rem;
Expand All @@ -1015,6 +1106,11 @@ video {
font-size: 3rem;
line-height: 1;
}

.sm\:text-sm\/6 {
font-size: 0.875rem;
line-height: 1.5rem;
}
}

@media (min-width: 768px) {
Expand Down
Loading

0 comments on commit 29451a5

Please sign in to comment.