specialized-agents

Running

File size: 13,638 Bytes

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Markdown/HTML Converter | PDF & DOCX</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
    <style>
        :root {
            --primary-color: #437494;
            --secondary-color: #29b98b;
            --accent-color: #7b7ac7;
            --background-color: #ecf0f1;
            --text-color: #2c3e50;
            --card-background: #ffffff;
        }
        body {
            background-color: var(--background-color);
            color: var(--text-color);
        }
        .card {
            background-color: var(--card-background);
            border: none;
            border-radius: 15px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }
        .btn-primary {
            background-color: var(--primary-color);
            border-color: var(--primary-color);
        }
        .btn-primary:hover {
            background-color: var(--secondary-color);
            border-color: var(--secondary-color);
        }
        .btn-success {
            background-color: var(--secondary-color);
            border-color: var(--secondary-color);
        }
        .btn-success:hover {
            background-color: var(--primary-color);
            border-color: var(--primary-color);
        }
        .btn-warning {
            background-color: var(--accent-color);
            border-color: var(--accent-color);
            color: white;
        }
        .btn-warning:hover {
            background-color: #c0392b;
            border-color: #c0392b;
            color: white;
        }
        pre {
            background-color: #f7f9fa;
            padding: 15px;
            border-radius: 10px;
            border: 1px solid #e0e0e0;
        }
        .form-control:focus {
            border-color: var(--primary-color);
            box-shadow: 0 0 0 0.2rem rgba(52, 152, 219, 0.25);
        }
        .fade-enter-active, .fade-leave-active {
            transition: opacity 0.5s;
        }
        .fade-enter-from, .fade-leave-to {
            opacity: 0;
        }
    </style>
</head>
<body>
    <div id="app" class="container py-5">
        <div class="card p-4 mx-auto mb-5" style="max-width: 800px;">
            <h1 class="text-center mb-4" style="color: var(--primary-color);">Markdown/HTML Converter</h1>
            <label for="inputType" class="form-label mb-0">Input Type:</label>
            <div class="d-flex align-items-center mb-3">
                
                <div class="me-3 flex-grow-1">
                    <select id="inputType" v-model="inputType" class="form-select" style="width: 100%;">
                        <option value="markdown">Markdown</option>
                        <option value="html">HTML</option>
                    </select>
                </div>
                
                <div>
                    <label class="btn btn-primary mb-0">
                        <i class="fas fa-upload me-2"></i> Upload {{ inputType.toUpperCase() }} File
                        <input type="file" @change="handleFileUpload" :accept="inputType === 'markdown' ? '.md,.markdown' : '.html,.htm'" class="d-none">
                    </label>
                </div>
            </div>

    
            <textarea v-model="inputContent" @input="updateCharCount" :placeholder="`Enter your ${inputType} here or upload a file`" class="form-control mb-3" rows="8"></textarea>
            
            <div class="text-end text-muted small mb-3">{{ charCount }} / 20000</div>
            
            <div v-if="fileName" class="text-center text-muted fst-italic mb-3">{{ fileName }}</div>
            
            <div class="d-flex justify-content-center mb-3">
                <button @click="convertToPdf" :disabled="isConverting || !inputContent" class="btn btn-success me-2">
                    <i class="fas fa-file-pdf me-2"></i> Convert to PDF
                </button>
                <button @click="convertToDocx" :disabled="isConverting || !inputContent" class="btn btn-primary">
                    <i class="fas fa-file-word me-2"></i> Convert to DOCX
                </button>
            </div>
            
            <transition name="fade">
                <p v-if="statusMessage" :class="{'text-danger': error, 'text-success': success, 'text-primary': isConverting}" class="mt-3 text-center fw-bold">
                    {{ statusMessage }}
                </p>
            </transition>
        </div>

        <!-- API Documentation -->
        <div class="card p-4 mx-auto mt-5" style="max-width: 800px;">
            <h2 class="text-center mb-4" style="color: var(--primary-color);">API Documentation</h2>
            <button class="btn btn-primary mb-3" @click="toggleApiDocs">
                {{ showApiDocs ? 'Hide API Docs' : 'Show API Docs' }}
            </button>
            <transition name="fade">
                <div v-if="showApiDocs">
                    <h3 class="mt-4 mb-3">Convert HTML to PDF/DOCX</h3>
                    <p>Endpoint: 
                        <code class="bg-light p-1 rounded">{{ selectedApi === 'pdf' ? 'https://pvanand-web-scraping.hf.space/html_to_pdf' : 'https://pvanand-web-scraping.hf.space/convert' }}</code>
                    </p>
                    <p>Method: <code class="bg-light p-1 rounded">POST</code></p>
                    <p>Content-Type: <code class="bg-light p-1 rounded">application/json</code></p>
                    <p>Request Body: 
                        <code class="bg-light p-1 rounded">{{ selectedApi === 'pdf' ? '{ "html_content": "Your HTML string here" }' : '{ "html": "Your HTML string here" }' }}</code>
                    </p>

                    <div class="mb-3">
                        <label for="apiSelect" class="form-label">Select API Example:</label>
                        <select id="apiSelect" v-model="selectedApi" class="form-select">
                            <option value="pdf">PDF</option>
                            <option value="docx">DOCX</option>
                        </select>
                    </div>

                    <div class="mb-3">
                        <label for="languageSelect" class="form-label">Select Language:</label>
                        <select id="languageSelect" v-model="selectedLanguage" class="form-select">
                            <option value="python">Python</option>
                            <option value="curl">cURL</option>
                            <option value="javascript">JavaScript</option>
                        </select>
                    </div>

                    <pre v-if="selectedLanguage === 'python'">
import requests
import json

url = "{{ selectedApi === 'pdf' ? 'https://pvanand-web-scraping.hf.space/html_to_pdf' : 'https://pvanand-web-scraping.hf.space/convert' }}"
payload = json.dumps({
    "{{ selectedApi === 'pdf' ? 'html_content' : 'html' }}": "&lt;h1&gt;Hello, World!&lt;/h1&gt;"
})
headers = {
    'Content-Type': 'application/json'
}

response = requests.post(url, headers=headers, data=payload)

with open('output.{{ selectedApi }}', 'wb') as f:
    f.write(response.content)
                    </pre>

                    <pre v-if="selectedLanguage === 'curl'">
curl -X POST '{{ selectedApi === 'pdf' ? 'https://pvanand-web-scraping.hf.space/html_to_pdf' : 'https://pvanand-web-scraping.hf.space/convert' }}' \
-H 'Content-Type: application/json' \
-d '{"{{ selectedApi === 'pdf' ? 'html_content' : 'html' }}": "&lt;h1&gt;Hello, World!&lt;/h1&gt;"}' \
--output output.{{ selectedApi }}
                    </pre>

                    <pre v-if="selectedLanguage === 'javascript'">
fetch('{{ selectedApi === 'pdf' ? 'https://pvanand-web-scraping.hf.space/html_to_pdf' : 'https://pvanand-web-scraping.hf.space/convert' }}', {
    method: 'POST',
    headers: {
        'Content-Type': 'application/json',
    },
    body: JSON.stringify({
        {{ selectedApi === 'pdf' ? 'html_content' : 'html' }}: '&lt;h1&gt;Hello, World!&lt;/h1&gt;'
    }),
})
.then(response => response.blob())
.then(blob => {
    const url = window.URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.style.display = 'none';
    a.href = url;
    a.download = 'output.{{ selectedApi }}';
    document.body.appendChild(a);
    a.click();
    window.URL.revokeObjectURL(url);
})
.catch((error) => console.error('Error:', error));
                    </pre>
                </div>
            </transition>
        </div>
    </div>

    <script>
        const { createApp, ref, computed } = Vue;
    
        createApp({
            setup() {
                const inputContent = ref('');
                const inputType = ref('markdown');
                const error = ref(false);
                const success = ref(false);
                const isConverting = ref(false);
                const fileName = ref('');
                const showApiDocs = ref(false);
                const selectedApi = ref('pdf');
                const selectedLanguage = ref('python');
    
                const charCount = computed(() => inputContent.value.length);
    
                const statusMessage = ref('');
    
                const updateCharCount = () => {
                    if (inputContent.value.length > 20000) {
                        inputContent.value = inputContent.value.slice(0, 20000);
                    }
                };
    
                const handleFileUpload = (event) => {
                    const file = event.target.files[0];
                    if (file) {
                        fileName.value = file.name;
                        const reader = new FileReader();
                        reader.onload = (e) => {
                            inputContent.value = e.target.result;
                            updateCharCount();
                        };
                        reader.readAsText(file);
                    }
                };
    
                const convertToPdf = async () => {
                    await convert('pdf');
                };
    
                const convertToDocx = async () => {
                    await convert('docx');
                };
    
                const convert = async (type) => {
                    error.value = false;
                    success.value = false;
                    isConverting.value = true;
                    statusMessage.value = 'Converting... Please wait.';
    
                    const url = type === 'pdf'
                        ? 'https://pvanand-web-scraping.hf.space/html_to_pdf'
                        : 'https://pvanand-web-scraping.hf.space/convert';
                    const paramName = type === 'pdf' ? 'html_content' : 'html';
                    const filename = `converted.${type}`;
                    const mimeType = type === 'pdf'
                        ? 'application/pdf'
                        : 'application/vnd.openxmlformats-officedocument.wordprocessingml.document';
    
                    try {
                        let htmlContent = inputContent.value;
                        if (inputType.value === 'markdown') {
                            // Use marked.parse() to convert Markdown to HTML
                            htmlContent = marked.parse(inputContent.value);
                        }
    
                        const response = await axios.post(url, {
                            [paramName]: htmlContent
                        }, { responseType: 'blob' });
                        
                        const blob = new Blob([response.data], { type: mimeType });
                        const link = document.createElement('a');
                        link.href = URL.createObjectURL(blob);
                        link.download = filename;
                        link.click();
                        URL.revokeObjectURL(link.href);
    
                        success.value = true;
                        statusMessage.value = `Successfully converted to ${type.toUpperCase()}!`;
                    } catch (e) {
                        error.value = true;
                        statusMessage.value = `Error converting to ${type.toUpperCase()}. Please try again.`;
                        console.error('Error:', e);
                    } finally {
                        isConverting.value = false;
                    }
                };
    
                const toggleApiDocs = () => {
                    showApiDocs.value = !showApiDocs.value;
                };
    
                return {
                    inputContent,
                    inputType,
                    charCount,
                    fileName,
                    statusMessage,
                    isConverting,
                    error,
                    success,
                    showApiDocs,
                    selectedApi,
                    selectedLanguage,
                    updateCharCount,
                    handleFileUpload,
                    convertToPdf,
                    convertToDocx,
                    toggleApiDocs
                };
            }
        }).mount('#app');
    </script>
    <script src="https://kit.fontawesome.com/your-fontawesome-kit.js" crossorigin="anonymous"></script>
</body>
</html>