649b0bfd02
The code changes in this commit remove the default checked state for the bypass-cache-checkbox in the try_it.html file. This allows users to manually select whether they want to bypass the cache or not. This commit message follows the established convention of starting with a type (feat for feature) and providing a concise and descriptive summary of the changes made.
218 lines
13 KiB
HTML
218 lines
13 KiB
HTML
<section class="try-it py-8 px-16 pb-20 bg-zinc-900 overflow-hidden">
|
|
<div class="container mx-auto ">
|
|
<h2 class="text-2xl font-bold mb-4 text-lime-500">Try It Now</h2>
|
|
<div class="flex gap-4">
|
|
<div class="flex flex-col flex-1 gap-2">
|
|
<div class="flex flex-col">
|
|
<label for="url-input" class="text-lime-500 font-bold text-xs">URL(s)</label>
|
|
<input
|
|
type="text"
|
|
id="url-input"
|
|
value="https://www.nbcnews.com/business"
|
|
class="border border-zinc-700 rounded px-4 py-0 bg-zinc-900 text-zinc-300"
|
|
placeholder="Enter URL(s) separated by commas"
|
|
/>
|
|
</div>
|
|
<div class="flex gap-2">
|
|
<div class="flex flex-col">
|
|
<label for="threshold" class="text-lime-500 font-bold text-xs">Min Words Threshold</label>
|
|
<select
|
|
id="threshold"
|
|
class="border border-zinc-700 rounded px-4 py-1 bg-zinc-900 text-zinc-300"
|
|
>
|
|
<option value="1">1</option>
|
|
<option value="5">5</option>
|
|
<option value="10" selected>10</option>
|
|
<option value="15">15</option>
|
|
<option value="20">20</option>
|
|
<option value="25">25</option>
|
|
</select>
|
|
</div>
|
|
<div class="flex flex-col flex-1">
|
|
<label for="css-selector" class="text-lime-500 font-bold text-xs">CSS Selector</label>
|
|
<input
|
|
type="text"
|
|
id="css-selector"
|
|
class="border border-zinc-700 rounded px-4 py-0 bg-zinc-900 text-zinc-300 placeholder-lime-700"
|
|
placeholder="CSS Selector (e.g. .content, #main, article)"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div class="flex gap-2">
|
|
<div class="flex flex-col">
|
|
<label for="extraction-strategy-select" class="text-lime-500 font-bold text-xs"
|
|
>Extraction Strategy</label
|
|
>
|
|
<select
|
|
id="extraction-strategy-select"
|
|
class="border border-zinc-700 rounded px-4 py-1 bg-zinc-900 text-zinc-300"
|
|
>
|
|
<option value="NoExtractionStrategy" selected>NoExtractionStrategy</option>
|
|
<option value="CosineStrategy">CosineStrategy</option>
|
|
<option value="LLMExtractionStrategy">LLMExtractionStrategy</option>
|
|
</select>
|
|
</div>
|
|
<div class="flex flex-col">
|
|
<label for="chunking-strategy-select" class="text-lime-500 font-bold text-xs"
|
|
>Chunking Strategy</label
|
|
>
|
|
<select
|
|
id="chunking-strategy-select"
|
|
class="border border-zinc-700 rounded px-4 py-1 bg-zinc-900 text-zinc-300"
|
|
>
|
|
<option value="RegexChunking">RegexChunking</option>
|
|
<option value="NlpSentenceChunking">NlpSentenceChunking</option>
|
|
<option value="TopicSegmentationChunking">TopicSegmentationChunking</option>
|
|
<option value="FixedLengthWordChunking">FixedLengthWordChunking</option>
|
|
<option value="SlidingWindowChunking">SlidingWindowChunking</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div id = "llm_settings" class="flex gap-2 hidden hidden">
|
|
<div class="flex flex-col">
|
|
<label for="provider-model-select" class="text-lime-500 font-bold text-xs"
|
|
>Provider Model</label
|
|
>
|
|
<select
|
|
id="provider-model-select"
|
|
class="border border-zinc-700 rounded px-4 py-1 bg-zinc-900 text-zinc-300"
|
|
>
|
|
<option value="groq/llama3-70b-8192">groq/llama3-70b-8192</option>
|
|
<option value="groq/llama3-8b-8192">groq/llama3-8b-8192</option>
|
|
<option value="groq/mixtral-8x7b-32768">groq/mixtral-8x7b-32768</option>
|
|
<option value="openai/gpt-4-turbo">gpt-4-turbo</option>
|
|
<option value="openai/gpt-3.5-turbo">gpt-3.5-turbo</option>
|
|
<option value="openai/gpt-4o">gpt-4o</option>
|
|
<option value="anthropic/claude-3-haiku-20240307">claude-3-haiku</option>
|
|
<option value="anthropic/claude-3-opus-20240229">claude-3-opus</option>
|
|
<option value="anthropic/claude-3-sonnet-20240229">claude-3-sonnet</option>
|
|
</select>
|
|
</div>
|
|
<div class="flex flex-col flex-1">
|
|
<label for="token-input" class="text-lime-500 font-bold text-xs">API Token</label>
|
|
<input
|
|
type="password"
|
|
id="token-input"
|
|
class="border border-zinc-700 rounded px-4 py-0 bg-zinc-900 text-zinc-300"
|
|
placeholder="Enter Groq API token"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div class="flex gap-2">
|
|
<!-- Add two textarea one for getting Keyword Filter and another one Instruction, make both grow whole with-->
|
|
<div id = "semantic_filter_div" class="flex flex-col flex-1 hidden">
|
|
<label for="keyword-filter" class="text-lime-500 font-bold text-xs">Keyword Filter</label>
|
|
<textarea
|
|
id="semantic_filter"
|
|
rows="3"
|
|
class="border border-zinc-700 rounded px-4 py-0 bg-zinc-900 text-zinc-300 placeholder-zinc-700"
|
|
placeholder="Enter keywords for CosineStrategy to narrow down the content."
|
|
></textarea>
|
|
</div>
|
|
<div id = "instruction_div" class="flex flex-col flex-1 hidden">
|
|
<label for="instruction" class="text-lime-500 font-bold text-xs">Instruction</label>
|
|
<textarea
|
|
id="instruction"
|
|
rows="3"
|
|
class="border border-zinc-700 rounded px-4 py-0 bg-zinc-900 text-zinc-300 placeholder-zinc-700"
|
|
placeholder="Enter instruction for the LLMEstrategy to instruct the model."
|
|
></textarea>
|
|
</div>
|
|
</div>
|
|
<div class="flex gap-3">
|
|
<div class="flex items-center gap-2">
|
|
<input type="checkbox" id="bypass-cache-checkbox" />
|
|
<label for="bypass-cache-checkbox" class="text-lime-500 font-bold">Bypass Cache</label>
|
|
</div>
|
|
<div class="flex items-center gap-2">
|
|
<input type="checkbox" id="screenshot-checkbox" checked />
|
|
<label for="screenshot-checkbox" class="text-lime-500 font-bold">Screenshot</label>
|
|
</div>
|
|
<div class="flex items-center gap-2 hidden">
|
|
<input type="checkbox" id="extract-blocks-checkbox" />
|
|
<label for="extract-blocks-checkbox" class="text-lime-500 font-bold">Extract Blocks</label>
|
|
</div>
|
|
<button id="crawl-btn" class="bg-lime-600 text-black font-bold px-4 py-0 rounded">Crawl</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="loading" class="hidden">
|
|
<p class="text-white">Loading... Please wait.</p>
|
|
</div>
|
|
<div id="result" class="flex-1 overflow-x-auto">
|
|
<div class="tab-buttons flex gap-2">
|
|
<button class="tab-btn px-4 py-1 text-sm bg-zinc-700 rounded-t text-lime-500" data-tab="json">
|
|
JSON
|
|
</button>
|
|
<button
|
|
class="tab-btn px-4 py-1 text-sm bg-zinc-700 rounded-t text-lime-500"
|
|
data-tab="cleaned-html"
|
|
>
|
|
Cleaned HTML
|
|
</button>
|
|
<button class="tab-btn px-4 py-1 text-sm bg-zinc-700 rounded-t text-lime-500" data-tab="markdown">
|
|
Markdown
|
|
</button>
|
|
<button class="tab-btn px-4 py-1 text-sm bg-zinc-700 rounded-t text-lime-500" data-tab="media">
|
|
Medias
|
|
</button>
|
|
<button class="tab-btn px-4 py-1 text-sm bg-zinc-700 rounded-t text-lime-500" data-tab="screenshot">
|
|
Screenshot
|
|
</button>
|
|
</div>
|
|
<div class="tab-content code bg-zinc-900 p-2 rounded h-full border border-zinc-700 text-sm">
|
|
<pre class="h-full flex"><code id="json-result" class="language-json"></code></pre>
|
|
<pre class="hidden h-full flex"><code id="cleaned-html-result" class="language-html"></code></pre>
|
|
<pre class="hidden h-full flex"><code id="markdown-result" class="language-markdown"></code></pre>
|
|
<pre class="hidden h-full flex"><code id="media-result" class="language-json"></code></pre>
|
|
<pre class="hidden h-full flex"><code id="screenshot-result"></code></pre>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="code_help" class="flex-1 overflow-x-auto">
|
|
<div class="tab-buttons flex gap-2">
|
|
<button class="code-tab-btn px-4 py-1 text-sm bg-zinc-700 rounded-t text-lime-500" data-tab="curl">
|
|
cURL
|
|
</button>
|
|
<button
|
|
class="code-tab-btn px-4 py-1 text-sm bg-zinc-700 rounded-t text-lime-500"
|
|
data-tab="library"
|
|
>
|
|
Python
|
|
</button>
|
|
<button
|
|
class="code-tab-btn px-4 py-1 text-sm bg-zinc-700 rounded-t text-lime-500"
|
|
data-tab="python"
|
|
>
|
|
REST API
|
|
</button>
|
|
<!-- <button
|
|
class="code-tab-btn px-4 py-1 text-sm bg-zinc-700 rounded-t text-lime-500"
|
|
data-tab="nodejs"
|
|
>
|
|
Node.js
|
|
</button> -->
|
|
</div>
|
|
<div class="tab-content result bg-zinc-900 p-2 rounded h-full border border-zinc-700 text-sm">
|
|
<pre class="h-full flex relative overflow-x-auto">
|
|
<code id="curl-code" class="language-bash"></code>
|
|
<button class="absolute top-2 right-2 bg-zinc-700 text-white px-2 py-1 rounded copy-btn" data-target="curl-code">Copy</button>
|
|
</pre>
|
|
<pre class="hidden h-full flex relative overflow-x-auto">
|
|
<code id="python-code" class="language-python"></code>
|
|
<button class="absolute top-2 right-2 bg-zinc-700 text-white px-2 py-1 rounded copy-btn" data-target="python-code">Copy</button>
|
|
</pre>
|
|
<pre class="hidden h-full flex relative overflow-x-auto">
|
|
<code id="nodejs-code" class="language-javascript"></code>
|
|
<button class="absolute top-2 right-2 bg-zinc-700 text-white px-2 py-1 rounded copy-btn" data-target="nodejs-code">Copy</button>
|
|
</pre>
|
|
<pre class="hidden h-full flex relative overflow-x-auto">
|
|
<code id="library-code" class="language-python"></code>
|
|
<button class="absolute top-2 right-2 bg-zinc-700 text-white px-2 py-1 rounded copy-btn" data-target="library-code">Copy</button>
|
|
</pre>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|