Alternative output options

simonw · web-flow · commit 727bbfa4acad · 2024-10-14T18:14:05.000-07:00
https://gist.github.com/simonw/e0a841a580038d15c7bf22bd7d104ce3
diff --git a/jina-reader.html b/jina-reader.html
@@ -17,19 +17,22 @@
             font-size: 24px;
             margin-bottom: 20px;
         }
-        #url-input, #submit-btn, #markdown-raw, #copy-btn {
+        #url-input, #format-select, #submit-btn, #markdown-raw, #copy-btn {
             font-size: 16px;
-            padding: 10px;
+            padding: 5px;
             margin-bottom: 10px;
             box-sizing: border-box;
         }
         #url-input {
-            width: 70%;
+            width: 50%;
+        }
+        #format-select {
+            width: 20%;
         }
         #submit-btn, #copy-btn {
             background-color: #4CAF50;
             color: white;
-            border: none;
+            border: 2px solid #4CAF50;
             cursor: pointer;
         }
         #submit-btn:hover, #copy-btn:hover {
@@ -62,8 +65,13 @@
         }
         @media (min-width: 768px) {
             #url-input {
-                width: 70%;
+                width: 50%;
+                display: inline-block;
+            }
+            #format-select {
+                width: 20%;
                 display: inline-block;
+                margin-left: 2%;
             }
             #submit-btn {
                 display: inline-block;
@@ -80,6 +88,12 @@ <h1>Jina Reader</h1>
     <p>An interface for the <a href="https://jina.ai/reader/">Jina Reader API</a>.</p>
     <form id="url-form">
         <input type="text" id="url-input" placeholder="Enter URL" required>
+        <select id="format-select">
+            <option value="markdown">Markdown</option>
+            <option value="html">HTML</option>
+            <option value="text">Text</option>
+            <option value="llm_markdown">LLM Markdown</option>
+        </select>
         <button type="submit" id="submit-btn">Submit</button>
     </form>
     <div id="loading">Loading...</div>
@@ -92,6 +106,7 @@ <h1>Jina Reader</h1>
     <script>
         const urlForm = document.getElementById('url-form');
         const urlInput = document.getElementById('url-input');
+        const formatSelect = document.getElementById('format-select');
         const loading = document.getElementById('loading');
         const result = document.getElementById('result');
         const markdownRaw = document.getElementById('markdown-raw');
@@ -101,34 +116,51 @@ <h1>Jina Reader</h1>
         urlForm.addEventListener('submit', async (e) => {
             e.preventDefault();
             const url = urlInput.value;
+            const format = formatSelect.value;
             if (!url) return;
 
             loading.style.display = 'block';
             result.style.display = 'none';
 
             try {
-                const response = await fetch(`https://r.jina.ai/${url}`);
-                const markdown = await response.text();
-                markdownRaw.value = markdown;
-                const htmlContent = `
-                    <html>
-                        <head>
-                            <style>
-                                body { font-family: Helvetica, sans-serif; line-height: 1.6; color: #333; }
-                                img { max-width: 100%; height: auto; }
-                            </style>
-                        </head>
-                        <body>
-                            ${marked.parse(markdown)}
-                        </body>
-                    </html>
-                `;
+                let fetchOptions = {
+                    method: 'GET'
+                };
+
+                if (format !== 'llm_markdown') {
+                    fetchOptions.headers = {
+                        "X-Return-Format": format
+                    };
+                }
+
+                const response = await fetch(`https://r.jina.ai/${url}`, fetchOptions);
+                const content = await response.text();
+                markdownRaw.value = content;
+
+                let htmlContent;
+                if (format === 'html') {
+                    htmlContent = content;
+                } else {
+                    htmlContent = `
+                        <html>
+                            <head>
+                                <style>
+                                    body { font-family: Helvetica, sans-serif; line-height: 1.6; color: #333; }
+                                    img { max-width: 100%; height: auto; }
+                                </style>
+                            </head>
+                            <body>
+                                ${format === 'text' ? `<pre>${content}</pre>` : marked.parse(content)}
+                            </body>
+                        </html>
+                    `;
+                }
                 markdownRendered.srcdoc = htmlContent;
                 result.style.display = 'block';
             } catch (error) {
-                console.error('Error fetching markdown:', error);
-                markdownRaw.value = 'Error fetching markdown. Please try again.';
-                markdownRendered.srcdoc = '<p>Error fetching markdown. Please try again.</p>';
+                console.error('Error fetching content:', error);
+                markdownRaw.value = 'Error fetching content. Please try again.';
+                markdownRendered.srcdoc = '<p>Error fetching content. Please try again.</p>';
                 result.style.display = 'block';
             } finally {
                 loading.style.display = 'none';
