📖 Hertaler
🇳🇱<br>🇬🇧<br>🇵🇱<br>🇪🇸
⚙️
🌐 OpenRouter API
🔑 PPQ.ai API
Llama 3.2 3B (~2GB)<br>Llama 3.1 8B (~5GB)<br>Phi-3.5 Mini (~2.5GB)<br>Gemma 2 2B (~1.5GB)
🔍
API Key:
Llama 3.3 70B<br>Gemini Flash 1.5<br>Claude 3 Haiku<br>GPT-4o Mini<br>Mistral 7B
🔒<br>openrouter.ai/keys
API Key:
GPT-4o Mini<br>Claude Sonnet 4.5<br>GPT-4o<br>Llama 3.3 70B
🔒<br>ppq.ai
🎚️
🌍
📂
📄
⬇️<br>⬇️<br>🔄
flex-direction: column;<br>align-items: center;<br>padding: 2rem 1rem 4rem;
header {<br>text-align: center;<br>margin-bottom: 2.5rem;<br>header h1 {<br>font-size: 2.2rem;<br>font-weight: 800;<br>background: linear-gradient(135deg, var(--accent), var(--accent2));<br>-webkit-background-clip: text;<br>-webkit-text-fill-color: transparent;<br>background-clip: text;<br>header p {<br>color: var(--muted);<br>margin-top: .5rem;<br>font-size: .95rem;
.card {<br>background: var(--surface);<br>border: 1px solid var(--border);<br>border-radius: var(--radius);<br>padding: 1.75rem;<br>width: 100%;<br>max-width: 720px;<br>margin-bottom: 1.25rem;<br>.card h2 {<br>font-size: 1rem;<br>font-weight: 700;<br>color: var(--accent2);<br>margin-bottom: 1rem;<br>display: flex;<br>align-items: center;<br>gap: .5rem;
/* AI Mode selector */<br>.mode-tabs {<br>display: flex;<br>gap: .5rem;<br>margin-bottom: 1rem;<br>flex-wrap: wrap;<br>.mode-tab {<br>flex: 1;<br>min-width: 140px;<br>padding: .6rem 1rem;<br>border-radius: 8px;<br>border: 1px solid var(--border);<br>background: var(--surface2);<br>color: var(--muted);<br>cursor: pointer;<br>font-size: .85rem;<br>font-weight: 600;<br>text-align: center;<br>transition: all .2s;<br>.mode-tab.active {<br>background: var(--accent);<br>color: #fff;<br>border-color: var(--accent);<br>.mode-tab:hover:not(.active) {<br>border-color: var(--accent);<br>color: var(--text);
/* API key input area */<br>.api-section {<br>display: none;<br>flex-direction: column;<br>gap: .75rem;<br>.api-section.visible { display: flex; }
.api-row {<br>display: flex;<br>gap: .5rem;<br>align-items: center;<br>.api-row label {<br>font-size: .82rem;<br>color: var(--muted);<br>white-space: nowrap;<br>min-width: 110px;<br>.api-row input {<br>flex: 1;<br>background: var(--surface2);<br>border: 1px solid var(--border);<br>border-radius: 8px;<br>padding: .55rem .9rem;<br>color: var(--text);<br>font-size: .9rem;<br>outline: none;<br>font-family: monospace;<br>transition: border .2s;<br>.api-row input:focus { border-color: var(--accent); }
.model-select {<br>flex: 1;<br>background: var(--surface2);<br>border: 1px solid var(--border);<br>border-radius: 8px;<br>padding: .55rem .9rem;<br>color: var(--text);<br>font-size: .9rem;<br>outline: none;<br>cursor: pointer;
.info-box {<br>background: var(--surface2);<br>border-left: 3px solid var(--accent);<br>border-radius: 6px;<br>padding: .65rem 1rem;<br>font-size: .82rem;<br>color: var(--muted);<br>line-height: 1.5;<br>.info-box a { color: var(--accent2); text-decoration: none; }<br>.info-box a:hover { text-decoration: underline; }
/* WebLLM model selector */<br>.webllm-section {<br>display: none;<br>flex-direction: column;<br>gap: .75rem;<br>.webllm-section.visible { display: flex; }
/* Drop zone */<br>#dropzone {<br>border: 2px dashed var(--border);<br>border-radius: var(--radius);<br>padding: 3rem 2rem;<br>text-align: center;<br>cursor: pointer;<br>transition: all .25s;<br>position: relative;<br>#dropzone.dragover {<br>border-color: var(--accent);<br>background: rgba(108,99,255,.07);<br>#dropzone .drop-icon { font-size: 3rem; margin-bottom: .75rem; }<br>#dropzone p { color: var(--muted); font-size: .95rem; }<br>#dropzone strong { color: var(--text); }<br>#dropzone input[type=file] {<br>position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%;
/* Progress */<br>#progress-card { display: none; }<br>#progress-card.visible { display: block; }
.progress-steps { display: flex; flex-direction: column; gap: .6rem; }<br>.step {<br>display: flex;<br>align-items: center;<br>gap: .75rem;<br>padding: .6rem .9rem;<br>border-radius: 8px;<br>background: var(--surface2);<br>font-size: .88rem;<br>.step-icon { font-size: 1.1rem; min-width: 1.5rem; text-align: center; }<br>.step-label { flex: 1; color: var(--muted); }<br>.step.active .step-label { color: var(--text); }<br>.step.done .step-label { color: var(--success); }<br>.step.error-step .step-label { color: var(--error); }
.progress-bar-wrap {<br>background: var(--surface2);<br>border-radius: 99px;<br>height: 6px;<br>margin-top: 1rem;<br>overflow: hidden;<br>.progress-bar {<br>height: 100%;<br>background: linear-gradient(90deg, var(--accent), var(--accent2));<br>border-radius: 99px;<br>width: 0%;<br>transition: width .4s ease;
.log-box {<br>background: var(--surface2);<br>border-radius: 8px;<br>padding: .75rem 1rem;<br>font-size: .78rem;<br>font-family: monospace;<br>color: var(--muted);<br>max-height: 120px;<br>overflow-y: auto;<br>margin-top: .75rem;<br>line-height: 1.6;
/* Download */<br>#download-card { display: none; }<br>#download-card.visible { display: block; }
.download-btn {<br>display: inline-flex;<br>align-items: center;<br>gap: .6rem;<br>background: linear-gradient(135deg, var(--accent), var(--accent2));<br>color: #fff;<br>border: none;<br>border-radius: 10px;<br>padding: .85rem 2rem;<br>font-size: 1rem;<br>font-weight: 700;<br>cursor: pointer;<br>text-decoration: none;<br>transition: opacity .2s, transform .1s;<br>margin-top: .75rem;<br>.download-btn:hover { opacity: .9; transform: translateY(-1px); }<br>.download-btn:active { transform:...