273 lines
14 KiB
HTML
273 lines
14 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>AI Filter Options</title>
|
|
<link rel="stylesheet" href="bulma.css">
|
|
<style>
|
|
:root {
|
|
--bulma-primary-h: 205deg;
|
|
--bulma-primary-s: 91%;
|
|
--bulma-primary-l: 57%;
|
|
--bulma-link-h: 205deg;
|
|
--bulma-link-s: 91%;
|
|
--bulma-link-l: 48%;
|
|
--bulma-info-h: 199deg;
|
|
--bulma-info-s: 44%;
|
|
--bulma-info-l: 82%;
|
|
--bulma-success-h: 145deg;
|
|
--bulma-success-s: 25%;
|
|
--bulma-success-l: 68%;
|
|
--bulma-warning-h: 44deg;
|
|
--bulma-warning-s: 86%;
|
|
--bulma-warning-l: 70%;
|
|
--bulma-danger-h: 0deg;
|
|
--bulma-danger-s: 49%;
|
|
--bulma-scheme-h: 200;
|
|
--bulma-scheme-s: 25%;
|
|
}
|
|
|
|
.tag {
|
|
--bulma-tag-h: 318;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<section class="section">
|
|
<div class="container" id="options-container">
|
|
<figure class="has-text-centered mb-4">
|
|
<img data-icon="full-logo" src="../resources/img/full-logo.png" alt="AI Filter Logo" style="max-height:40px;">
|
|
</figure>
|
|
|
|
<div class="level mb-4">
|
|
<div class="level-left">
|
|
<div class="tabs" id="main-tabs">
|
|
<ul>
|
|
<li class="is-active" data-tab="settings"><a><span class="icon is-small"><img data-icon="settings" data-size="16" src="../resources/img/settings-light-16.png" alt=""></span><span>Settings</span></a></li>
|
|
<li data-tab="rules"><a><span class="icon is-small"><img data-icon="clipboarddata" data-size="16" src="../resources/img/clipboarddata-light-16.png" alt=""></span><span>Rules</span></a></li>
|
|
<li data-tab="maintenance"><a><span class="icon is-small"><img data-icon="gear" data-size="16" src="../resources/img/gear-light-16.png" alt=""></span><span>Maintenance</span></a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="level-right">
|
|
<button class="button is-primary" id="save" disabled>
|
|
<span class="icon is-small"><img data-icon="flag" data-size="16" src="../resources/img/flag-light-16.png" alt=""></span>
|
|
<span>Save</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="settings-tab" class="tab-content">
|
|
<h2 class="title is-4">
|
|
<span class="icon is-small"><img data-icon="settings" data-size="16" src="../resources/img/settings-light-16.png" alt=""></span>
|
|
<span>Settings</span>
|
|
</h2>
|
|
<div class="field">
|
|
<label class="label" for="endpoint">Endpoint</label>
|
|
<div class="control">
|
|
<input class="input" type="text" id="endpoint" placeholder="https://api.example.com">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="field">
|
|
<label class="label" for="template">Prompt template</label>
|
|
<div class="control">
|
|
<div class="select is-fullwidth">
|
|
<select id="template"></select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="custom-template-container" class="field is-hidden">
|
|
<label class="label">Custom template</label>
|
|
<div class="control">
|
|
<textarea class="textarea" id="custom-template" rows="6" placeholder="Enter your custom template here..."></textarea>
|
|
</div>
|
|
<p class="help">Placeholders: {{system}}, {{email}}, {{query}}</p>
|
|
</div>
|
|
|
|
<div class="field">
|
|
<label class="label" for="system-instructions">System instructions</label>
|
|
<div class="control">
|
|
<textarea class="textarea" id="system-instructions" rows="4" placeholder="Enter system instructions..."></textarea>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="field">
|
|
<label class="label" for="theme-select">Theme</label>
|
|
<div class="control">
|
|
<div class="select">
|
|
<select id="theme-select">
|
|
<option value="auto">Match Thunderbird</option>
|
|
<option value="light">Light</option>
|
|
<option value="dark">Dark</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="buttons">
|
|
<button class="button is-danger" id="reset-system">
|
|
<span class="icon is-small"><img data-icon="reply" data-size="16" src="../resources/img/reply-light-16.png" alt=""></span>
|
|
<span>Reset to default</span>
|
|
</button>
|
|
<button class="button" id="toggle-advanced" type="button">
|
|
<span class="icon is-small"><img data-icon="gear" data-size="16" src="../resources/img/gear-light-16.png" alt=""></span>
|
|
<span>Advanced</span>
|
|
</button>
|
|
</div>
|
|
|
|
<div id="advanced-options" class="mt-4 is-hidden">
|
|
<div class="field">
|
|
<label class="checkbox">
|
|
<input type="checkbox" id="debug-logging"> Enable debug logging
|
|
</label>
|
|
</div>
|
|
<div class="field">
|
|
<label class="checkbox">
|
|
<input type="checkbox" id="html-to-markdown"> Convert HTML body to Markdown
|
|
</label>
|
|
</div>
|
|
<div class="field">
|
|
<label class="checkbox">
|
|
<input type="checkbox" id="strip-url-params"> Remove URL tracking parameters
|
|
</label>
|
|
</div>
|
|
<div class="field">
|
|
<label class="checkbox">
|
|
<input type="checkbox" id="alt-text-images"> Replace images with alt text
|
|
</label>
|
|
</div>
|
|
<div class="field">
|
|
<label class="checkbox">
|
|
<input type="checkbox" id="collapse-whitespace"> Collapse long whitespace
|
|
</label>
|
|
</div>
|
|
<div class="field">
|
|
<label class="label" for="max_tokens">Max tokens</label>
|
|
<div class="control">
|
|
<input class="input" type="number" id="max_tokens">
|
|
</div>
|
|
</div>
|
|
<div class="field">
|
|
<label class="label" for="temperature">Temperature</label>
|
|
<div class="control">
|
|
<input class="input" type="number" step="0.01" id="temperature">
|
|
</div>
|
|
</div>
|
|
<div class="field">
|
|
<label class="label" for="top_p">Top P</label>
|
|
<div class="control">
|
|
<input class="input" type="number" step="0.01" id="top_p">
|
|
</div>
|
|
</div>
|
|
<div class="field">
|
|
<label class="label" for="seed">Seed</label>
|
|
<div class="control">
|
|
<input class="input" type="number" id="seed">
|
|
</div>
|
|
</div>
|
|
<div class="field">
|
|
<label class="label" for="repetition_penalty">Repetition penalty</label>
|
|
<div class="control">
|
|
<input class="input" type="number" step="0.01" id="repetition_penalty">
|
|
</div>
|
|
</div>
|
|
<div class="field">
|
|
<label class="label" for="top_k">Top K</label>
|
|
<div class="control">
|
|
<input class="input" type="number" id="top_k">
|
|
</div>
|
|
</div>
|
|
<div class="field">
|
|
<label class="label" for="min_p">Min P</label>
|
|
<div class="control">
|
|
<input class="input" type="number" step="0.01" id="min_p">
|
|
</div>
|
|
</div>
|
|
<div class="field">
|
|
<label class="label" for="presence_penalty">Presence penalty</label>
|
|
<div class="control">
|
|
<input class="input" type="number" step="0.01" id="presence_penalty">
|
|
</div>
|
|
</div>
|
|
<div class="field">
|
|
<label class="label" for="frequency_penalty">Frequency penalty</label>
|
|
<div class="control">
|
|
<input class="input" type="number" step="0.01" id="frequency_penalty">
|
|
</div>
|
|
</div>
|
|
<div class="field">
|
|
<label class="label" for="typical_p">Typical P</label>
|
|
<div class="control">
|
|
<input class="input" type="number" step="0.01" id="typical_p">
|
|
</div>
|
|
</div>
|
|
<div class="field">
|
|
<label class="label" for="tfs">TFS</label>
|
|
<div class="control">
|
|
<input class="input" type="number" step="0.01" id="tfs">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="rules-tab" class="tab-content is-hidden">
|
|
<h2 class="title is-4">
|
|
<span class="icon is-small"><img data-icon="clipboarddata" data-size="16" src="../resources/img/clipboarddata-light-16.png" alt=""></span>
|
|
<span>Classification Rules</span>
|
|
</h2>
|
|
<div id="rules-container"></div>
|
|
<button class="button is-link" id="add-rule" type="button">Add Rule</button>
|
|
</div>
|
|
|
|
<div id="maintenance-tab" class="tab-content is-hidden">
|
|
<h2 class="title is-4">
|
|
<span class="icon is-small"><img data-icon="gear" data-size="16" src="../resources/img/gear-light-16.png" alt=""></span>
|
|
<span>Maintenance</span>
|
|
</h2>
|
|
<table class="table is-fullwidth">
|
|
<tbody>
|
|
<tr><th>Rule count</th><td id="rule-count"></td></tr>
|
|
<tr><th>Cache entries</th><td id="cache-count"></td></tr>
|
|
<tr><th>Queue items</th><td id="queue-count"></td></tr>
|
|
<tr><th>Current run time</th><td id="current-time">--:--:--</td></tr>
|
|
<tr><th>Last run time</th><td id="last-time">--:--:--</td></tr>
|
|
<tr><th>Average run time</th><td id="average-time">--:--:--</td></tr>
|
|
<tr><th>Total run time</th><td id="total-time">--:--:--</td></tr>
|
|
</tbody>
|
|
</table>
|
|
<button class="button is-danger" id="clear-cache" type="button">
|
|
<span class="icon is-small"><img data-icon="trash" data-size="16" src="../resources/img/trash-light-16.png" alt=""></span>
|
|
<span>Clear Cache</span>
|
|
</button>
|
|
<div class="field mt-4">
|
|
<label class="label">Data categories</label>
|
|
<div class="control">
|
|
<label class="checkbox mr-3"><input class="transfer-category" type="checkbox" value="settings" checked> Settings</label>
|
|
<label class="checkbox mr-3"><input class="transfer-category" type="checkbox" value="rules" checked> Rules</label>
|
|
<label class="checkbox"><input class="transfer-category" type="checkbox" value="cache" checked> Cache</label>
|
|
</div>
|
|
</div>
|
|
<div class="field is-grouped mt-4">
|
|
<p class="control">
|
|
<button class="button" id="export-data" type="button">
|
|
<span class="icon is-small"><img data-icon="download" data-size="16" src="../resources/img/download-light-16.png" alt=""></span>
|
|
<span>Export Data</span>
|
|
</button>
|
|
</p>
|
|
<p class="control">
|
|
<button class="button" id="import-data" type="button">
|
|
<span class="icon is-small"><img data-icon="upload" data-size="16" src="../resources/img/upload-light-16.png" alt=""></span>
|
|
<span>Import Data</span>
|
|
</button>
|
|
<input class="is-hidden" type="file" id="import-file" accept="application/json">
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<script src="options.js"></script>
|
|
</body>
|
|
</html>
|