Hugging Face's logo

Spaces:
Mussez
/
tariffwise-showcase
Running

App Files Community
tariffwise-showcase / index.html
Mussez's picture
Mussez
Upload index.html
388ee01 verified
Raw
History Blame Contribute Delete
17.4 kB
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TariffWise. AI tariff classification for footwear importers.</title>
<meta name="description" content="TariffWise interviews you the way a customs expert would, suggests a ten digit HTS code, explains why, and stores the record.">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Zilla+Slab:wght@500;600;700&family=Public+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap" rel="stylesheet">
<style>
 :root {
 --ink: #16233B;
 --ink-soft: #33415C;
 --paper: #F7F5EF;
 --card: #FFFFFF;
 --brass: #A9812F;
 --brass-deep: #7C5E1E;
 --rule: #DDD8CA;
 --stamp: #8E2F21;
 --code-bg: #0F1A2E;
 }
 * { margin: 0; padding: 0; box-sizing: border-box; }
 html { scroll-behavior: smooth; }
 @media (prefers-reduced-motion: reduce) {
 html { scroll-behavior: auto; }
 * { animation: none !important; transition: none !important; }
 }
 body {
 font-family: "Public Sans", system-ui, sans-serif;
 background: var(--paper);
 color: var(--ink);
 line-height: 1.6;
 font-size: 17px;
 }
 a { color: var(--brass-deep); }
 a:focus-visible, button:focus-visible {
 outline: 3px solid var(--brass);
 outline-offset: 2px;
 }
 .wrap { max-width: 1060px; margin: 0 auto; padding: 0 24px; }
 /* ---------- Header ---------- */
 header {
 background: var(--paper);
 border-bottom: 1px solid var(--rule);
 position: sticky; top: 0; z-index: 20;
 }
 .nav {
 display: flex; align-items: center; justify-content: space-between;
 padding: 14px 0; gap: 16px; flex-wrap: wrap;
 }
 .wordmark {
 font-family: "Zilla Slab", serif;
 font-weight: 700; font-size: 1.35rem; letter-spacing: 0.01em;
 color: var(--ink); text-decoration: none;
 }
 .wordmark span { color: var(--brass-deep); }
 nav ul { display: flex; gap: 22px; list-style: none; flex-wrap: wrap; }
 nav a {
 text-decoration: none; color: var(--ink-soft);
 font-size: 0.92rem; font-weight: 600;
 }
 nav a:hover { color: var(--brass-deep); }
 /* ---------- Hero ---------- */
 .hero {
 background: var(--ink);
 color: #EDEAE0;
 padding: 72px 0 64px;
 }
 .eyebrow {
 font-family: "IBM Plex Mono", monospace;
 font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase;
 color: var(--brass); margin-bottom: 18px;
 }
 .hero h1 {
 font-family: "Zilla Slab", serif;
 font-weight: 600;
 font-size: clamp(1.9rem, 4.2vw, 2.9rem);
 line-height: 1.18;
 max-width: 21ch;
 margin-bottom: 20px;
 }
 .hero p.lede {
 max-width: 58ch; font-size: 1.06rem; color: #C9CBD4;
 margin-bottom: 48px;
 }
 /* HTS code anatomy */
 .anatomy {
 background: var(--code-bg);
 border: 1px solid #2A3B5C;
 border-radius: 6px;
 padding: 34px 28px 26px;
 }
 .anatomy-label {
 font-family: "IBM Plex Mono", monospace;
 font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase;
 color: #8A93A8; margin-bottom: 20px;
 }
 .code-row {
 display: flex; align-items: flex-start; flex-wrap: wrap;
 gap: 0; row-gap: 28px;
 }
 .seg {
 display: flex; flex-direction: column; align-items: center;
 }
 .seg .digits {
 font-family: "IBM Plex Mono", monospace;
 font-weight: 600;
 font-size: clamp(2rem, 6vw, 3.4rem);
 color: #F2EFE6;
 padding: 0 6px 10px;
 border-bottom: 3px solid var(--brass);
 white-space: nowrap;
 }
 .seg:nth-child(2) .digits { border-color: #C9A24B; }
 .seg:nth-child(3) .digits { border-color: #8FA3C8; }
 .seg:nth-child(4) .digits { border-color: #5F7396; }
 .seg .tag {
 font-family: "IBM Plex Mono", monospace;
 font-size: 0.7rem; letter-spacing: 0.06em;
 color: #9AA3B8; margin-top: 10px; text-align: center;
 max-width: 14ch;
 }
 .anatomy-caption {
 margin-top: 26px; font-size: 0.9rem; color: #9AA3B8; max-width: 70ch;
 }
 /* ---------- Sections ---------- */
 section { padding: 72px 0; }
 section + section { border-top: 1px solid var(--rule); }
 h2 {
 font-family: "Zilla Slab", serif;
 font-weight: 600; font-size: 1.7rem;
 margin-bottom: 12px;
 }
 .section-intro { max-width: 66ch; color: var(--ink-soft); margin-bottom: 36px; }
 /* ---------- Live demo ---------- */
 .demo-frame {
 background: var(--card);
 border: 1px solid var(--rule);
 border-radius: 6px;
 overflow: hidden;
 box-shadow: 0 2px 10px rgba(22, 35, 59, 0.06);
 }
 .demo-bar {
 display: flex; align-items: center; justify-content: space-between;
 gap: 12px; flex-wrap: wrap;
 padding: 10px 16px;
 background: var(--ink); color: #D8DBE3;
 font-family: "IBM Plex Mono", monospace; font-size: 0.78rem;
 }
 .demo-bar .dot {
 display: inline-block; width: 8px; height: 8px; border-radius: 50%;
 background: #4CAF7D; margin-right: 8px;
 }
 iframe {
 display: block; width: 100%; height: 720px; border: 0; background: #fff;
 }
 .fallback {
 display: flex; align-items: center; justify-content: space-between;
 gap: 16px; flex-wrap: wrap;
 margin-top: 14px;
 padding: 16px 18px;
 background: #EFECE1; border: 1px solid var(--rule); border-radius: 6px;
 font-size: 0.95rem;
 }
 .btn {
 display: inline-block;
 background: var(--ink); color: #F2EFE6;
 text-decoration: none; font-weight: 600; font-size: 0.92rem;
 padding: 10px 18px; border-radius: 4px;
 white-space: nowrap;
 }
 .btn:hover { background: #22345A; }
 .walkthrough { margin-top: 44px; }
 .walkthrough h3 {
 font-family: "Zilla Slab", serif; font-weight: 600; font-size: 1.2rem;
 margin-bottom: 8px;
 }
 .walkthrough p { max-width: 66ch; color: var(--ink-soft); margin-bottom: 18px; font-size: 0.97rem; }
 video {
 width: 100%; border-radius: 6px; border: 1px solid var(--rule);
 background: var(--code-bg); display: block;
 }
 /* ---------- How it works ---------- */
 .steps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
 .step {
 background: var(--card); border: 1px solid var(--rule); border-radius: 6px;
 padding: 20px 16px;
 }
 .step .num {
 font-family: "IBM Plex Mono", monospace;
 font-size: 0.72rem; letter-spacing: 0.1em;
 color: var(--brass-deep); margin-bottom: 10px; display: block;
 }
 .step h3 {
 font-family: "Zilla Slab", serif; font-weight: 600;
 font-size: 1.02rem; margin-bottom: 8px; line-height: 1.3;
 }
 .step p { font-size: 0.88rem; color: var(--ink-soft); }
 /* ---------- Design decisions ---------- */
 .decisions { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
 .decision {
 background: var(--card); border: 1px solid var(--rule); border-radius: 6px;
 padding: 24px 24px 22px;
 border-top: 3px solid var(--brass);
 }
 .decision h3 {
 font-family: "Zilla Slab", serif; font-weight: 600; font-size: 1.12rem;
 margin-bottom: 10px;
 }
 .decision p { font-size: 0.95rem; color: var(--ink-soft); }
 .decision .cite { color: var(--ink); font-weight: 500; }
 /* ---------- Disclaimer ---------- */
 .stampbox {
 border: 2px solid var(--stamp);
 border-radius: 6px;
 padding: 26px 28px;
 max-width: 720px;
 position: relative;
 background: var(--card);
 }
 .stampbox .stamp-label {
 position: absolute; top: -13px; left: 22px;
 background: var(--card);
 padding: 0 10px;
 font-family: "IBM Plex Mono", monospace;
 font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase;
 color: var(--stamp); font-weight: 600;
 }
 .stampbox p { font-size: 0.98rem; }
 /* ---------- References ---------- */
 .refs { max-width: 780px; }
 .refs p {
 font-size: 0.92rem;
 padding-left: 2em; text-indent: -2em;
 margin-bottom: 12px;
 color: var(--ink-soft);
 }
 .refs em { font-style: italic; }
 footer {
 border-top: 1px solid var(--rule);
 padding: 26px 0 40px;
 font-size: 0.85rem; color: var(--ink-soft);
 }
 @media (max-width: 900px) {
 .steps { grid-template-columns: 1fr 1fr; }
 }
 @media (max-width: 640px) {
 .steps, .decisions { grid-template-columns: 1fr; }
 iframe { height: 560px; }
 section { padding: 52px 0; }
 .hero { padding: 52px 0 44px; }
 }
</style>
</head>
<body>
<header>
 <div class="wrap nav">
 <a class="wordmark" href="#top">Tariff<span>Wise</span></a>
 <nav aria-label="Page sections">
 <ul>
 <li><a href="#demo">Live demo</a></li>
 <li><a href="#flow">How it works</a></li>
 <li><a href="#decisions">Design decisions</a></li>
 <li><a href="#sources">Sources</a></li>
 </ul>
 </nav>
 </div>
</header>
<main id="top">
<div class="hero">
 <div class="wrap">
 <p class="eyebrow">AI tariff classification for footwear importers</p>
 <h1>A defensible tariff code, with the reasoning on the record.</h1>
 <p class="lede">TariffWise interviews you the way a customs expert would. It asks only the questions that change the code, suggests a ten digit HTS classification, explains why, and stores the record for audit.</p>
<div class="anatomy" aria-label="Anatomy of an HTS code">
 <p class="anatomy-label">Anatomy of a classification</p>
 <div class="code-row">
 <div class="seg">
 <span class="digits">64</span>
 <span class="tag">Chapter 64<br>Footwear</span>
 </div>
 <div class="seg">
 <span class="digits">04</span>
 <span class="tag">Heading 6404<br>Textile uppers</span>
 </div>
 <div class="seg">
 <span class="digits">.11</span>
 <span class="tag">Subheading<br>Sports footwear</span>
 </div>
 <div class="seg">
 <span class="digits">.9000</span>
 <span class="tag">Statistical suffix<br>Duty line</span>
 </div>
 </div>
 <p class="anatomy-caption">Each segment narrows the classification, and each turns on a fact about the product. Upper material, ankle height, and toe construction decide where a shoe lands. TariffWise captures those facts one question at a time.</p>
 </div>
 </div>
 </div>
<section id="demo">
 <div class="wrap">
 <h2>Live demo</h2>
 <p class="section-intro">This is the working prototype. Enter a footwear product below and answer the interview. The engine walks verified 2026 USITC Chapter 64 data and the AI layer extracts facts from your answers.</p>
<div class="demo-frame">
 <div class="demo-bar">
 <span><span class="dot" aria-hidden="true"></span>huggingface.co/spaces/Mussez/tariffwise</span>
 <span>live prototype</span>
 </div>
 <iframe
 src="https://mussez-tariffwise.hf.space"
 title="TariffWise live prototype"
 allow="clipboard-write"
 loading="lazy"></iframe>
 </div>
<div class="fallback">
 <span>If the frame shows a loading screen, the free Space is waking up. Opening it directly starts it faster.</span>
 <a class="btn" href="https://huggingface.co/spaces/Mussez/tariffwise" target="_blank" rel="noopener">Open TariffWise in a new tab</a>
 </div>
<div class="walkthrough">
 <h3>Recorded walkthrough</h3>
 <p>A complete interview session, from product description to stored audit record. The recording shows the full flow even when the live Space is asleep.</p>
 <video controls preload="metadata">
 <source src="walkthrough.mp4" type="video/mp4">
 Your browser cannot play this video. Use the direct link to the live prototype above.
 </video>
 </div>
 </div>
 </section>
<section id="flow">
 <div class="wrap">
 <h2>How it works</h2>
 <p class="section-intro">Five steps move the user from rough input to a documented, exportable record. The user supplies what they know. The AI gathers what the code requires.</p>
 <div class="steps">
 <div class="step">
 <span class="num">STEP 1</span>
 <h3>Describe the product</h3>
 <p>A short form takes the product name and a plain description. No technical detail is required to start.</p>
 </div>
 <div class="step">
 <span class="num">STEP 2</span>
 <h3>Answer the interview</h3>
 <p>The AI asks only the questions that change the code. A live panel shows the working classification narrow with each answer.</p>
 </div>
 <div class="step">
 <span class="num">STEP 3</span>
 <h3>Review the result</h3>
 <p>The suggested code arrives with a numbered rationale tied to your answers. A chat box lets you question it.</p>
 </div>
 <div class="step">
 <span class="num">STEP 4</span>
 <h3>Keep the history</h3>
 <p>Every classification is stored with its date, status, and reasoning. Past decisions stay reviewable.</p>
 </div>
 <div class="step">
 <span class="num">STEP 5</span>
 <h3>Export the record</h3>
 <p>The full audit record holds the facts, the rationale, and the steps taken. It exports as evidence for customs review.</p>
 </div>
 </div>
 </div>
 </section>
<section id="decisions">
 <div class="wrap">
 <h2>Design decisions</h2>
 <p class="section-intro">Classification capability is common across competing tools. TariffWise competes on how clearly it reaches a defensible code and documents the reasoning. Each interface choice below serves that goal and is grounded in a specific design principle.</p>
 <div class="decisions">
 <div class="decision">
 <h3>The intake form stays short</h3>
 <p>The form asks only what the importer already knows. The AI gathers the technical facts in the interview. <span class="cite">Good discovery reduces the effort a user must spend to get value (Cagan, 2018).</span></p>
 </div>
 <div class="decision">
 <h3>The rationale forms in view</h3>
 <p>A live panel shows the working code update after every answer, so the user watches the reasoning take shape. <span class="cite">Showing why an output was generated helps users judge whether to accept it (Weisz et al., 2024).</span></p>
 </div>
 <div class="decision">
 <h3>Limits are stated before use</h3>
 <p>The app declares what it can and cannot do on the first screen, including that it suggests and explains but does not file. <span class="cite">Upfront explanation of capabilities and limitations calibrates user trust (Weisz et al., 2024).</span></p>
 </div>
 <div class="decision">
 <h3>The result can be interrogated</h3>
 <p>The suggested code carries a numbered rationale, and a chat box lets the user challenge it in plain language. <span class="cite">Trust built through the interface shapes the intention to use a tool, at times more than usability does (Zieglmeier &amp; Lehene, 2022).</span></p>
 </div>
 <div class="decision">
 <h3>Every control signals its action</h3>
 <p>Buttons name what they do, and each answer produces a visible change in the working classification. <span class="cite">Signifiers show where action is possible and feedback confirms what the action did (Norman, 2011).</span></p>
 </div>
 <div class="decision">
 <h3>The AI assists, the importer decides</h3>
 <p>The AI extracts facts and documents reasoning. The importer reviews, questions, and accepts the final code. <span class="cite">AI serves users best when it augments their judgment rather than replaces it (Moran &amp; Nielsen, 2023).</span></p>
 </div>
 </div>
 </div>
 </section>
<section>
 <div class="wrap">
 <div class="stampbox">
 <span class="stamp-label">Scope of the tool</span>
 <p>TariffWise is decision support. It suggests a classification and explains the reasoning. It does not file entries and it is not legal advice. The importer remains responsible for the final code.</p>
 </div>
 </div>
 </section>
<section id="sources">
 <div class="wrap">
 <h2>Sources</h2>
 <div class="refs">
 <p>Cagan, M. (2018). <em>Inspired: How to create tech products customers love</em> (2nd ed.). Wiley.</p>
 <p>Moran, K., &amp; Nielsen, J. (2023, November 3). <em>AI for UX: Getting started</em>. Nielsen Norman Group. https://www.nngroup.com/articles/ai-ux-getting-started/</p>
 <p>Norman, D. A. (2011). <em>The design of everyday things</em>. Tantor Media.</p>
 <p>Weisz, J. D., He, J., Muller, M., Hoefer, G., Miles, R., &amp; Geyer, W. (2024). <em>Design principles for generative AI applications</em> [Preprint]. arXiv. https://arxiv.org/abs/2401.14484</p>
 <p>Zieglmeier, V., &amp; Lehene, A. M. (2022). <em>Designing trustworthy user interfaces</em> [Preprint]. arXiv. https://arxiv.org/abs/2202.12915</p>
 </div>
 </div>
 </section>
</main>
<footer>
 <div class="wrap">
 <p>TariffWise. Musse Abayneh. MPIM-6750-140, Module 7. Georgetown University.</p>
 </div>
</footer>
</body>
</html>