| | <!DOCTYPE html> |
| | <html lang="en"> |
| |
|
| | <head> |
| | <meta charset="UTF-8"> |
| | <title>InfoRadar — see what matters</title> |
| | <meta name="description" |
| | content="InfoRadar visualizes token-level information density in text using LLMs, helping you quickly find key content and skip redundancy."> |
| | <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| | <link rel="stylesheet" type="text/css" href="start.css"> |
| | </head> |
| |
|
| | <body> |
| |
|
| | <main class="main_frame"> |
| | <section class="left_panel"> |
| | <div class="floating_content"> |
| | <header class="home-toolbar"> |
| | <div class="dark-mode-toggle-wrapper"> |
| | <h1 class="home-toolbar-title"><span class="title-main-line"><span data-i18n>InfoRadar</span><span class="title-tagline" data-i18n>- see what matters.</span></span> <span class="title-formula" data-i18n>LLM × Linguistics × Information Theory</span></h1> |
| | <div class="home-toolbar-actions"> |
| | <a href="compare.html?showTextRender=1&demos=/quick-start-1.json,/quick-start-2.json" target="_blank" class="compare-link" title="Compare analysis results" data-i18n="text,title">Compare results</a> |
| | <div class="settings-menu-wrapper"> |
| | <button id="settings_btn" class="settings-btn" title="Settings" data-i18n="title"> |
| | <span class="settings-icon">⚙️</span> |
| | </button> |
| | <div id="settings_menu" class="settings-menu" style="display: none;"> |
| | <div class="settings-menu-item settings-menu-row"> |
| | <span class="settings-menu-label" data-i18n>Minimap:</span> |
| | <label class="settings-menu-control settings-menu-checkbox" style="cursor: pointer;"> |
| | <input type="checkbox" id="enable_minimap_toggle"> |
| | </label> |
| | </div> |
| | <div id="theme_menu_item" class="settings-menu-item settings-menu-row"> |
| | <span class="settings-menu-label" id="theme_menu_label" data-i18n>Theme:</span> |
| | <div id="theme_dropdown" class="settings-menu-control settings-dropdown-in-menu"></div> |
| | </div> |
| | <div id="language_menu_item" class="settings-menu-item settings-menu-row"> |
| | <span class="settings-menu-label" id="language_menu_label" data-i18n>Language:</span> |
| | <div id="language_dropdown" class="settings-menu-control settings-dropdown-in-menu"></div> |
| | </div> |
| | <div class="settings-menu-divider"></div> |
| | <div id="model_manage_item" class="settings-menu-item settings-menu-row" data-admin-only style="display: none;"> |
| | <span class="settings-menu-label">Model management:</span> |
| | <button id="model_manage_btn" class="settings-menu-control settings-menu-btn">Enter</button> |
| | </div> |
| | <div id="token_render_style_item" class="settings-menu-item settings-menu-row" data-admin-only style="display: none;"> |
| | <span class="settings-menu-label">Token render style:</span> |
| | <div id="token_render_style_dropdown" class="settings-menu-control settings-dropdown-in-menu"></div> |
| | </div> |
| | <div id="semantic_analysis_item" class="settings-menu-item settings-menu-row" data-admin-only style="display: none;"> |
| | <span class="settings-menu-label">Semantic analysis:</span> |
| | <label class="settings-menu-control settings-menu-checkbox" style="cursor: pointer;"> |
| | <input type="checkbox" id="semantic_analysis_toggle"> |
| | </label> |
| | </div> |
| | <div id="disable_info_density_item" class="settings-menu-item settings-menu-row" data-admin-only style="display: none;"> |
| | <span class="settings-menu-label">Disable info density:</span> |
| | <label class="settings-menu-control settings-menu-checkbox" style="cursor: pointer;"> |
| | <input type="checkbox" id="disable_info_density_toggle"> |
| | </label> |
| | </div> |
| | <div class="settings-menu-item settings-menu-row"> |
| | <span class="settings-menu-label">Admin mode:</span> |
| | <button id="admin_mode_btn" class="settings-menu-control settings-menu-btn">Enter</button> |
| | </div> |
| | </div> |
| | </div> |
| | </div> |
| | </div> |
| | </header> |
| |
|
| | |
| | <section id="home-intro-content" class="intro-section"> |
| | |
| | </section> |
| |
|
| | <section class="demo-section"> |
| | <div class="demo-header"> |
| | <span id="demo_header_text" data-i18n>Quick start - select a demo:</span> |
| | <button id="refresh_demo_btn" class="refresh-btn" title="Refresh demo list" data-i18n="title">↻</button> |
| | <div class="file-input-wrapper"> |
| | <button id="open_local_demo_btn" class="file-input-button" type="button" title="Open demo file from local" data-i18n="text,title">Select local</button> |
| | <span id="open_local_demo_filename" class="file-input-filename" data-i18n>No file |
| | selected</span> |
| | <input type="file" id="open_local_demo_input" style="display: none;" |
| | accept=".json,application/json"> |
| | </div> |
| | <span id="demos_loading" class="demos-loading" data-i18n>Refreshing...</span> |
| | </div> |
| | <div class="demos"></div> |
| | </section> |
| |
|
| | <section class="input-section"> |
| | <div class="input-header"> |
| | <span id="input_header_text"><span class="demo" data-i18n>or enter text:</span></span> |
| | <div class="text-action-buttons-top"> |
| | <div class="textarea-counter" id="text_count_display"> |
| | <span id="text_count_value">0</span> <span id="char_unit" data-i18n>chars</span> |
| | </div> |
| | <button id="clear_text_btn" class="text-action-btn" data-i18n>Clear</button> |
| | <button id="paste_text_btn" class="text-action-btn" data-i18n>Paste</button> |
| | <button id="load_url_btn" class="text-action-btn" title="Load text from URL and analyze" |
| | data-i18n="text,title">Analyze URL</button> |
| | <button id="analyze_save_btn" class="text-action-btn" data-i18n>Analyze&Upload</button> |
| | </div> |
| | </div> |
| | <div class="textarea-wrapper"> |
| | <textarea id="test_text"></textarea> |
| | <div class="button-group"> |
| | <div class="button-left"> |
| | <button id="submit_text_btn" class="primary-btn" data-i18n>Analyze</button> |
| | <div class="loadersmall loader-small-container"></div> |
| | <span id="analyze_progress" class="analyze-progress"></span> |
| | </div> |
| | <div id="text_metrics" class="text-metrics"> |
| | <div class="text-metrics-primary"> |
| | <span id="metric_bytes">0 B</span> |
| | <span class="text-metrics-divider">|</span> |
| | <span id="metric_chars">0 chars</span> |
| | <span class="text-metrics-divider">|</span> |
| | <span id="metric_tokens">0 tokens</span> |
| | </div> |
| | <div id="metric_total_surprisal" class="text-metrics-secondary">total information = 0 |
| | bits</div> |
| | <div id="metric_model" class="text-metrics-secondary">model: </div> |
| | </div> |
| | <div class="button-right"> |
| | <button id="save_demo_btn" class="primary-btn inactive" data-i18n>Upload</button> |
| | <button id="save_local_demo_btn" class="primary-btn inactive" title="Save to local file" |
| | data-i18n="text,title">Save</button> |
| | </div> |
| | </div> |
| | </div> |
| | </section> |
| |
|
| | <section id="semantic_analysis_section" class="semantic-analysis-section" style="display: none;"> |
| | <div class="semantic-analysis-controls"> |
| | <div class="semantic-search-row"> |
| | <div class="semantic-search-input-wrapper"> |
| | <input type="text" id="semantic_search_input" class="semantic-search-input" placeholder="Enter query for semantic analysis"> |
| | <button type="button" id="semantic_search_clear" class="semantic-search-clear demo-delete-btn" title="Clear" aria-label="Clear" data-i18n="title,aria-label">×</button> |
| | <ul id="semantic_search_history_dropdown" class="semantic-search-history-dropdown"></ul> |
| | </div> |
| | <div class="semantic-search-actions"> |
| | <button id="semantic_search_btn" class="primary-btn" data-i18n>Search</button> |
| | <span id="semantic_match_degree" class="semantic-match-degree" style="display: none;"></span> |
| | <div id="semantic_search_loader" class="semantic-search-loader" style="visibility: hidden;"></div> |
| | <span id="semantic_progress" class="semantic-progress"></span> |
| | </div> |
| | </div> |
| | <div class="semantic-submode-row"> |
| | <label class="semantic-submode-label" for="semantic_submode_select">submode: </label> |
| | <select id="semantic_submode_select" class="semantic-submode-select"> |
| | <option value="count">count</option> |
| | <option value="match_score">match_score</option> |
| | <option value="fill_blank">fill_blank</option> |
| | <option value="hybrid">hybrid</option> |
| | </select> |
| | </div> |
| | </div> |
| | </section> |
| | </div> |
| |
|
| | <section id="all_result" class="results-section"> |
| | <div id="stats" class="stats-container"> |
| | <div id="semantic_score_histogram_item" class="histogram-item" style="display: none;"> |
| | <div id="semantic_score_histogram_title"></div> |
| | <svg id="stats_semantic_score"></svg> |
| | </div> |
| | <div id="token_histogram_item" class="histogram-item" style="display: none;"> |
| | <div id="token_histogram_title"></div> |
| | <svg id="stats_frac"></svg> |
| | </div> |
| | <div id="surprisal_progress_item" class="histogram-item" style="display: none;"> |
| | <div id="surprisal_progress_title"></div> |
| | <svg id="stats_surprisal_progress"></svg> |
| | </div> |
| | </div> |
| | </section> |
| | </section> |
| |
|
| | <div class="resizer" id="resizer"></div> |
| |
|
| | <section class="right_panel"> |
| | <div id="results"> |
| | <div id="major_tooltip" class="tooltip"> |
| | <div class="currentToken"></div> |
| | <div class="myDetail"></div> |
| | <br /> |
| | <div class="predictions predictions-table"></div> |
| | </div> |
| | </div> |
| | </section> |
| | </main> |
| |
|
| | <div id="toast" class="toast"></div> |
| |
|
| | <script src="vendor.js"></script> |
| | <script src="start.js"></script> |
| | </body> |
| |
|
| | </html> |
| |
|
