Spaces:

amosnbn
/

PapuaTranslate

Running

App Files Files Community

amosnbn commited on 11 days ago

Commit

5b5694b

1 Parent(s): 6f08369

Fix responsive layout

Browse files

Files changed (4) hide show

.gitignore +13 -0
frontend/about.html +120 -130
frontend/index.html +62 -62
papua-lora-ckpt-168 +0 -1

.gitignore ADDED Viewed

	@@ -0,0 +1,13 @@

+__pycache__/
+*.pyc
+.venv/
+env/
+.vscode/
+# model/artefak besar – jangan dipush
+*.pt
+*.ckpt
+*.safetensors
+*.bin
+*.onnx
+/tmp/
+papua-lora-ckpt-168/

frontend/about.html CHANGED Viewed

@@ -2,160 +2,150 @@
 <html lang="id">
 <head>
   <meta charset="UTF-8"/>
-  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
   <title>Tentang — PapuaTranslate</title>
   <style>
-    *{margin:0;padding:0;box-sizing:border-box;font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif}
-    body{background:#f8f9fa;color:#333;line-height:1.6}
-    .container{max-width:1000px;margin:0 auto;padding:0 20px}
-    header{background:#fff;color:#000;padding:14px 0;box-shadow:0 2px 10px rgba(0,0,0,.08)}
-    .hc{display:flex;justify-content:space-between;align-items:center}
-    .logo h1{font-size:22px;font-weight:800}
-    nav ul{display:flex;list-style:none;gap:12px}
-    nav a{color:#000;text-decoration:none;font-weight:500;transition:.2s;padding:6px 10px;border:1px solid #000;border-radius:6px}
-    nav a:hover{background:#000;color:#fff}
-    .hero{background:#fff;padding:30px 0 22px;text-align:center;margin-bottom:20px;border-bottom:1px solid #eee}
-    .hero h2{font-size:24px;margin-bottom:8px;color:#000}
-    .card{background:#fff;padding:20px;border-radius:12px;box-shadow:0 6px 20px rgba(0,0,0,.08);margin-bottom:20px;border:1px solid #eee}
-    .meta{display:grid;grid-template-columns:160px 1fr;gap:8px;margin-top:10px}
     .label{color:#666}
     .value{color:#111}
-    .title{font-size:18px;font-weight:800;margin-bottom:8px}
-    footer{background:#fff;color:#000;padding:20px 0;border-top:1px solid #eee;margin-top:20px;text-align:center;font-size:13px}
-    .team-container{display:flex;gap:20px;flex-wrap:wrap}
-    .team-member{flex:1 1 250px;text-align:center;background:#fff;padding:18px;border-radius:10px;box-shadow:0 4px 12px rgba(0,0,0,.06)}
-    .photo-placeholder{width:160px;height:160px;border-radius:50%;background:#f0f0f0;margin:0 auto 14px;display:flex;align-items:center;justify-content:center;overflow:hidden;border:2px solid #ddd;cursor:pointer;transition:transform .2s}
-    .photo-placeholder:hover{transform:scale(1.03)}
-    .photo-placeholder img{width:100%;height:100%;object-fit:cover}
-    .member-name{font-weight:700;margin-bottom:4px;color:#111}
-    .member-role{color:#666;font-size:14px}
     /* Modal */
-    .modal{display:none;position:fixed;z-index:1000;left:0;top:0;width:100%;height:100%;background-color:rgba(0,0,0,0.8)}
-    .modal-content{display:block;margin:auto;max-width:82%;max-height:82%;border-radius:8px;box-shadow:0 4px 20px rgba(0,0,0,0.3)}
-    .modal-caption{color:#fff;text-align:center;padding:10px;font-size:16px;margin-top:10px}
-    .close{position:absolute;top:15px;right:35px;color:#fff;font-size:40px;font-weight:bold;cursor:pointer}
-    .close:hover{color:#ccc}
-    @media (max-width:768px){
       .meta{grid-template-columns:1fr}
-      .photo-placeholder{width:140px;height:140px}
     }
   </style>
 </head>
 <body>
-  <header>
-    <div class="container hc">
-      <div class="logo"><h1>PapuaTranslate</h1></div>
-      <nav>
-        <ul>
-          <li><a href="/">Beranda</a></li>
-          <li><a href="/about">About</a></li>
-          <li><a href="/#history">History</a></li>
-        </ul>
-      </nav>
-    </div>
-  </header>
-  <section class="hero">
-    <div class="container">
-      <h2>Tentang Proyek</h2>
-      <p>Informasi singkat mengenai skripsi &amp; pembimbing.</p>
-    </div>
-  </section>
-  <main class="container">
-    <div class="card">
-      <div class="title">Judul Skripsi</div>
-      <p><b>Penerapan Causal Encoder Decoder Natural Language Instructions in Indonesian (CENDOL) untuk Translasi Bahasa Papua ke Bahasa Indonesia Baku</b></p>
-      <div class="meta">
-        <div class="label">Dosen Pembimbing</div><div class="value">Viny Christanti Mawardi, S.Kom., M.Kom.</div>
-        <div class="label">Dosen Pendamping</div><div class="value">Manatap Dolok Lauro, S.Kom., M.M.S.I.</div>
-        <div class="label">Program/Kampus</div><div class="value">Teknik Informatika, Universitas Tarumanagara</div>
-        <div class="label">Tahun</div><div class="value">2025</div>
-      </div>
     </div>
-    <div class="card">
-      <div class="title">Tim Pengembang</div>
-      <div class="team-container">
-        <div class="team-member">
-          <div class="photo-placeholder" onclick="openModal('modal1')">
-            <img src="{{ url_for('static', filename='image/pembuat.jpg') }}" alt="Amos Valentino Nababan"
-                 onerror="this.style.display='none'; this.parentNode.innerHTML='<div style=&quot;color:#999;font-size:14px;&quot;>Foto Tidak Ditemukan</div>';"/>
-          </div>
-          <div class="member-name">Amos Valentino Nababan</div>
-          <div class="member-role">Pembuat</div>
         </div>
-        <div class="team-member">
-          <div class="photo-placeholder" onclick="openModal('modal2')">
-            <img src="{{ url_for('static', filename='image/dosen1.jpg') }}" alt="Viny Christanti Mawardi"
-                 onerror="this.style.display='none'; this.parentNode.innerHTML='<div style=&quot;color:#999;font-size:14px;&quot;>Foto Tidak Ditemukan</div>';"/>
-          </div>
-          <div class="member-name">Viny Christanti Mawardi, S.Kom., M.Kom.</div>
-          <div class="member-role">Dosen Pembimbing</div>
         </div>
-        <div class="team-member">
-          <div class="photo-placeholder" onclick="openModal('modal3')">
-            <img src="{{ url_for('static', filename='image/dosen2.jpg') }}" alt="Manatap Dolok Lauro"
-                 onerror="this.style.display='none'; this.parentNode.innerHTML='<div style=&quot;color:#999;font-size:14px;&quot;>Foto Tidak Ditemukan</div>';"/>
-          </div>
-          <div class="member-name">Manatap Dolok Lauro, S.Kom., M.M.S.I.</div>
-          <div class="member-role">Dosen Pendamping</div>
         </div>
       </div>
     </div>
-    <div class="card">
-      <div class="title">Deskripsi Singkat</div>
-      <p>
-        Aplikasi ini menerapkan arsitektur <i>Causal Encoder-Decoder</i> (CENDOL) berbasis mT5 dengan LoRA Adapter
-        untuk translasi dialek Papua ke Bahasa Indonesia baku.
-      </p>
-    </div>
-  </main>
-  <footer>
-    <div class="container">© 2025 PapuaTranslate • Halaman About</div>
-  </footer>
-  <!-- Modal Pop-up -->
-  <div id="modal1" class="modal">
-    <span class="close" onclick="closeModal('modal1')">&times;</span>
-    <img class="modal-content" src="{{ url_for('static', filename='image/pembuat.jpg') }}" alt="Amos Valentino Nababan">
-    <div class="modal-caption">Amos Valentino Nababan — Pembuat</div>
-  </div>
-  <div id="modal2" class="modal">
-    <span class="close" onclick="closeModal('modal2')">&times;</span>
-    <img class="modal-content" src="{{ url_for('static', filename='image/dosen1.jpg') }}" alt="Viny Christanti Mawardi">
-    <div class="modal-caption">Viny Christanti Mawardi, S.Kom., M.Kom.</div>
-  </div>
-  <div id="modal3" class="modal">
-    <span class="close" onclick="closeModal('modal3')">&times;</span>
-    <img class="modal-content" src="{{ url_for('static', filename='image/dosen2.jpg') }}" alt="Manatap Dolok Lauro">
-    <div class="modal-caption">Manatap Dolok Lauro, S.Kom., M.M.S.I.</div>
   </div>
-  <script>
-    function openModal(id){ document.getElementById(id).style.display="block"; }
-    function closeModal(id){ document.getElementById(id).style.display="none"; }
-    window.onclick = (e)=>{
-      const modals = document.getElementsByClassName('modal');
-      for (let i=0;i<modals.length;i++){ if (e.target==modals[i]) modals[i].style.display="none"; }
-    };
-    document.addEventListener('keydown', (e)=>{
-      if (e.key==='Escape'){
-        const modals = document.getElementsByClassName('modal');
-        for (let i=0;i<modals.length;i++) modals[i].style.display="none";
-      }
-    });
-  </script>
 </body>
 </html>

 <html lang="id">
 <head>
   <meta charset="UTF-8"/>
+  <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
   <title>Tentang — PapuaTranslate</title>
   <style>
+    :root{
+      --bg:#f6f7f9; --card:#fff; --ink:#111; --sub:#666; --line:#e9ecef;
+      --shadow:0 8px 24px rgba(0,0,0,.08); --radius:14px; --pad:clamp(12px,2.5vw,20px); --maxw:1120px;
+    }
+    *{box-sizing:border-box}
+    html,body{margin:0;padding:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Noto Sans,Arial,sans-serif;color:var(--ink);background:var(--bg);line-height:1.6}
+    header{position:sticky;top:0;z-index:30;background:var(--card);box-shadow:0 4px 16px rgba(0,0,0,.06)}
+    .nav{max-width:var(--maxw);margin:auto;display:flex;align-items:center;justify-content:space-between;padding:var(--pad)}
+    .logo{font-weight:800;font-size:clamp(18px,4vw,22px)}
+    .menu{display:flex;gap:8px;flex-wrap:wrap}
+    .pill{display:inline-flex;align-items:center;justify-content:center;padding:10px 14px;border:1px solid var(--ink);border-radius:999px;min-height:42px}
+    .pill:hover{background:var(--ink);color:#fff}
+    .hero{background:var(--card);border-bottom:1px solid var(--line)}
+    .hero-inner{max-width:var(--maxw);margin:auto;text-align:center;padding:clamp(18px,6vw,30px) var(--pad)}
+    .hero h2{margin:0 0 6px;font-size:clamp(20px,6vw,28px)}
+    .hero p{margin:0;color:var(--sub)}
+    .wrap{max-width:var(--maxw);margin:auto;padding:var(--pad)}
+    .card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:var(--pad);margin-bottom:clamp(12px,2vw,16px)}
+    .title{font-weight:800;margin:0 0 8px;font-size:clamp(16px,4.5vw,18px)}
+    .meta{display:grid;grid-template-columns:minmax(120px,160px) 1fr;gap:8px;margin-top:8px}
     .label{color:#666}
     .value{color:#111}
+    .team{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,2.4vw,18px)}
+    .member{background:var(--card);border:1px solid var(--line);border-radius:12px;box-shadow:0 4px 14px rgba(0,0,0,.06);padding:clamp(12px,2.2vw,18px);text-align:center}
+    .avatar{width:clamp(120px,28vw,160px);height:clamp(120px,28vw,160px);border-radius:50%;margin-inline:auto 10px auto;display:flex;align-items:center;justify-content:center;overflow:hidden;border:2px solid #ddd;cursor:pointer;transition:transform .2s}
+    .avatar:hover{transform:scale(1.03)}
+    .avatar img{width:100%;height:100%;object-fit:cover}
+    .m-name{font-weight:800;margin-top:8px}
+    .m-role{color:#666;font-size:clamp(12px,3.3vw,14px)}
     /* Modal */
+    .modal{display:none;position:fixed;inset:0;z-index:1000;background:rgba(0,0,0,.8)}
+    .modal img{display:block;margin:auto;max-width:86vw;max-height:86vh;border-radius:10px;box-shadow:0 8px 30px rgba(0,0,0,.35)}
+    .modal .caption{color:#fff;text-align:center;padding:8px;font-size:clamp(12px,3.2vw,16px)}
+    .close{position:absolute;top:14px;right:18px;color:#fff;font-size:34px;font-weight:800;cursor:pointer}
+    @media (max-width:900px){ .team{grid-template-columns:repeat(2,1fr)} }
+    @media (max-width:600px){
       .meta{grid-template-columns:1fr}
+      .team{grid-template-columns:1fr}
     }
+    body{padding-bottom:env(safe-area-inset-bottom)}
   </style>
 </head>
 <body>
+<header>
+  <div class="nav" role="navigation" aria-label="Menu about">
+    <div class="logo">PapuaTranslate</div>
+    <nav class="menu">
+      <a class="pill" href="/">Beranda</a>
+      <a class="pill" href="/about">About</a>
+      <a class="pill" href="/#history">History</a>
+    </nav>
+  </div>
+</header>
+<section class="hero">
+  <div class="hero-inner">
+    <h2>Tentang Proyek</h2>
+    <p>Informasi singkat mengenai skripsi &amp; pembimbing.</p>
+  </div>
+</section>
+<main class="wrap">
+  <section class="card">
+    <h3 class="title">Judul Skripsi</h3>
+    <p><b>Penerapan Causal Encoder Decoder Natural Language Instructions in Indonesian (CENDOL) untuk Translasi Bahasa Papua ke Bahasa Indonesia Baku</b></p>
+    <div class="meta" style="margin-top:10px">
+      <div class="label">Dosen Pembimbing</div><div class="value">Viny Christanti Mawardi, S.Kom., M.Kom.</div>
+      <div class="label">Dosen Pendamping</div><div class="value">Manatap Dolok Lauro, S.Kom., M.M.S.I.</div>
+      <div class="label">Program/Kampus</div><div class="value">Teknik Informatika, Universitas Tarumanagara</div>
+      <div class="label">Tahun</div><div class="value">2025</div>
     </div>
+  </section>
+  <section class="card">
+    <h3 class="title">Tim Pengembang</h3>
+    <div class="team">
+      <div class="member">
+        <div class="avatar" onclick="openModal('m1')">
+          <img src="{{ url_for('static', filename='image/pembuat.jpg') }}" alt="Amos Valentino Nababan" onerror="this.style.display='none'; this.parentNode.innerHTML='<div style=&quot;color:#999&quot;>Foto Tidak Ditemukan</div>'"/>
         </div>
+        <div class="m-name">Amos Valentino Nababan</div>
+        <div class="m-role">Pembuat</div>
+      </div>
+      <div class="member">
+        <div class="avatar" onclick="openModal('m2')">
+          <img src="{{ url_for('static', filename='image/dosen1.jpg') }}" alt="Viny Christanti Mawardi" onerror="this.style.display='none'; this.parentNode.innerHTML='<div style=&quot;color:#999&quot;>Foto Tidak Ditemukan</div>'"/>
         </div>
+        <div class="m-name">Viny Christanti Mawardi, S.Kom., M.Kom.</div>
+        <div class="m-role">Dosen Pembimbing</div>
+      </div>
+      <div class="member">
+        <div class="avatar" onclick="openModal('m3')">
+          <img src="{{ url_for('static', filename='image/dosen2.jpg') }}" alt="Manatap Dolok Lauro" onerror="this.style.display='none'; this.parentNode.innerHTML='<div style=&quot;color:#999&quot;>Foto Tidak Ditemukan</div>'"/>
         </div>
+        <div class="m-name">Manatap Dolok Lauro, S.Kom., M.M.S.I.</div>
+        <div class="m-role">Dosen Pendamping</div>
       </div>
     </div>
+  </section>
+  <section class="card">
+    <h3 class="title">Deskripsi Singkat</h3>
+    <p>Aplikasi ini menerapkan arsitektur <i>Causal Encoder-Decoder</i> (CENDOL) berbasis mT5 dengan LoRA Adapter untuk translasi dialek Papua ke Bahasa Indonesia baku.</p>
+  </section>
+</main>
+<footer>
+  <div class="wrap" style="text-align:center;padding-top:8px;border-top:1px solid var(--line)">
+    © 2025 PapuaTranslate • Halaman About
   </div>
+</footer>
+<!-- Modals -->
+<div id="m1" class="modal" role="dialog" aria-modal="true" aria-label="Foto Amos">
+  <span class="close" onclick="closeModal('m1')">×</span>
+  <img src="{{ url_for('static', filename='image/pembuat.jpg') }}" alt="Amos Valentino Nababan">
+  <div class="caption">Amos Valentino Nababan — Pembuat</div>
+</div>
+<div id="m2" class="modal" role="dialog" aria-modal="true" aria-label="Foto Viny">
+  <span class="close" onclick="closeModal('m2')">×</span>
+  <img src="{{ url_for('static', filename='image/dosen1.jpg') }}" alt="Viny Christanti Mawardi">
+  <div class="caption">Viny Christanti Mawardi, S.Kom., M.Kom.</div>
+</div>
+<div id="m3" class="modal" role="dialog" aria-modal="true" aria-label="Foto Manatap">
+  <span class="close" onclick="closeModal('m3')">×</span>
+  <img src="{{ url_for('static', filename='image/dosen2.jpg') }}" alt="Manatap Dolok Lauro">
+  <div class="caption">Manatap Dolok Lauro, S.Kom., M.M.S.I.</div>
+</div>
+<script>
+  function openModal(id){ document.getElementById(id).style.display = 'block'; }
+  function closeModal(id){ document.getElementById(id).style.display = 'none'; }
+  window.addEventListener('keydown', e => { if (e.key === 'Escape') ['m1','m2','m3'].forEach(closeModal) });
+  window.addEventListener('click', e => { if (e.target.classList.contains('modal')) e.target.style.display='none'; });
+</script>
 </body>
 </html>

frontend/index.html CHANGED Viewed

@@ -9,90 +9,83 @@
     :root{
       --bg:#f6f7f9; --card:#fff; --ink:#111; --sub:#666; --line:#e9ecef;
       --shadow:0 8px 24px rgba(0,0,0,.08); --brand:#000; --brand-ink:#fff;
     }
     *{box-sizing:border-box}
-    html,body{margin:0;padding:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,'Helvetica Neue',Arial,'Apple Color Emoji','Segoe UI Emoji',sans-serif;color:var(--ink);background:var(--bg);line-height:1.6}
     /* Header */
     header{position:sticky;top:0;z-index:50;background:var(--card);box-shadow:0 4px 16px rgba(0,0,0,.06)}
-    .nav{max-width:1120px;margin:auto;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 20px}
-    .logo{font-weight:800;font-size:clamp(18px,2.5vw,24px)}
-    .menu{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
-    .pill{display:inline-block;padding:8px 12px;border:1px solid var(--ink);border-radius:999px;text-decoration:none;color:var(--ink);transition:.2s}
     .pill:hover{background:var(--ink);color:#fff}
-    .badge{background:#000;color:#fff;border-radius:999px;padding:4px 10px;font-size:12px}
-    .spacer{flex:1}
     /* Hero */
     .hero{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--card)}
-    .hero-inner{max-width:1120px;margin:auto;text-align:center;padding:30px 20px 22px}
-    .hero h1{margin:0 0 6px;font-size:clamp(22px,3.6vw,34px)}
-    .hero p{margin:0;color:var(--sub)}
-    /* Main blocks */
-    .wrap{max-width:1120px;margin:auto;padding:20px}
-    .card{background:var(--card);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow)}
-    .card-pad{padding:20px}
-    .title{margin:0 0 12px;text-align:center;font-size:clamp(16px,2.8vw,20px)}
-    /* Translator (full width) */
-    .input-group{margin-bottom:14px}
-    .lbl{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;color:#222;font-weight:600;font-size:14px}
-    .hint{font-size:12px;color:var(--sub);margin-left:8px}
     textarea{
-      width:100%;min-height:150px;resize:vertical;border:1px solid #ddd;border-radius:12px;
-      padding:14px 12px;font-size:16px;background:#fafafa;outline:none;transition:border .2s,background .2s;
     }
     textarea:focus{border-color:#555;background:#fff}
     .btn{
-      width:100%;display:inline-flex;align-items:center;justify-content:center;gap:8px;
-      padding:14px 16px;border:none;border-radius:12px;background:var(--brand);color:var(--brand-ink);
-      font-weight:800;cursor:pointer;transition:transform .05s ease,opacity .2s; user-select:none;
     }
-    .btn:active{transform:scale(.99)}
-    .btn[disabled]{opacity:.6;cursor:not-allowed}
-    .result{border:1px solid var(--line);background:#fafafa;border-radius:12px;padding:14px;min-height:96px}
-    .result h4{margin:0 0 6px;font-size:13px;color:var(--sub)}
-    .result-text{font-size:16px;white-space:pre-wrap;color:#000}
-    .note{font-size:12px;color:var(--sub);margin-top:8px}
-    /* History (under translator) */
-    .history{margin-top:18px}
-    .list{margin:0;padding-left:18px}
     .list li{margin-bottom:6px}
     /* Footer */
-    footer{margin-top:24px;background:var(--card);border-top:1px solid var(--line)}
-    .foot{max-width:1120px;margin:auto;padding:18px 20px;text-align:center}
-    .copy{font-size:12px;color:var(--sub)}
-    /* Mobile tweaks */
-    @media (max-width: 680px){
-      .nav{padding:12px 14px}
-      .hero-inner{padding:22px 14px 16px}
-      .wrap{padding:14px}
-    }
     body{padding-bottom:env(safe-area-inset-bottom)}
   </style>
 </head>
 <body>
 <header>
-  <div class="nav">
     <div class="logo">PapuaTranslate</div>
-    <div class="menu">
       <a class="pill" href="/">Home</a>
       <a class="pill" href="/about">About</a>
       <a class="pill" href="/#history">History</a>
       {% if logged_in %}
-        <span class="badge">Aktif</span>
         <a class="pill" href="/logout">Logout</a>
       {% else %}
         <a class="pill" href="/login">Login</a>
         <a class="pill" href="/register">Daftar</a>
       {% endif %}
-    </div>
   </div>
 </header>
@@ -110,23 +103,23 @@
     <div class="input-group">
       <div class="lbl">
-        <span>Bahasa Papua</span>
         <span class="hint">Masukkan teks berlogat Papua</span>
       </div>
-      <textarea id="papua-input" placeholder="Contoh: 'ko su makan' → 'Kamu sudah makan.'"></textarea>
     </div>
-    <button class="btn" id="translate-btn" onclick="translateText()">
       <span id="btn-text">Terjemahkan</span>
       <span id="btn-spin" aria-hidden="true" style="display:none">⏳</span>
     </button>
-    <div class="input-group" style="margin-top:14px">
       <div class="lbl">
-        <span>Bahasa Indonesia Baku</span>
         <span class="hint">Hasil terjemahan</span>
       </div>
-      <div class="result">
         <h4>Terjemahan:</h4>
         <div id="indonesia-output" class="result-text">Hasil terjemahan akan ditampilkan di sini…</div>
       </div>
@@ -135,7 +128,7 @@
   </section>
   <!-- History under translator -->
-  <section class="card card-pad history" id="history">
     <h2 class="title">Riwayat Terakhir</h2>
     <ul class="list" id="history-list">
       {% for it in recent %}
@@ -155,6 +148,11 @@
 </footer>
 <script>
   async function translateText() {
     const input = document.getElementById('papua-input');
     const out = document.getElementById('indonesia-output');
@@ -163,7 +161,7 @@
     const btnSpin = document.getElementById('btn-spin');
     const text = input.value.trim();
-    if (!text) { out.textContent = "Silakan masukkan teks logat Papua."; return; }
     out.textContent = "Menerjemahkan…";
     btn.disabled = true; btnText.style.display='none'; btnSpin.style.display='inline';
@@ -172,13 +170,15 @@
       const r = await fetch('/translate', {
         method: 'POST',
         headers: {'Content-Type':'application/json'},
-        credentials: 'same-origin',     // penting: kirim cookie login
         body: JSON.stringify({ text, max_new_tokens: 24 })
       });
       const data = await r.json();
       if (r.ok && data && (data.mt || data.result)) {
         out.textContent = data.mt || data.result;
         loadHistory();
       } else {
         out.textContent = 'Error: ' + ((data && (data.error || data.detail)) || 'Terjadi kesalahan.');
       }
@@ -209,7 +209,7 @@
   }
   // Ctrl/Cmd + Enter shortcut
-  document.getElementById('papua-input').addEventListener('keydown', (e)=>{
     if (e.key === 'Enter' && (e.ctrlKey || e.metaKey)) translateText();
   });
 </script>

     :root{
       --bg:#f6f7f9; --card:#fff; --ink:#111; --sub:#666; --line:#e9ecef;
       --shadow:0 8px 24px rgba(0,0,0,.08); --brand:#000; --brand-ink:#fff;
+      --radius:14px; --gap:clamp(12px,2vw,20px); --pad:clamp(12px,2.5vw,20px);
+      --maxw:1120px; --fx:clamp(14px,2.6vw,16px);
     }
     *{box-sizing:border-box}
+    html,body{margin:0;padding:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Noto Sans,Arial,sans-serif;color:var(--ink);background:var(--bg);line-height:1.6;font-size:var(--fx)}
+    a{color:inherit;text-decoration:none}
     /* Header */
     header{position:sticky;top:0;z-index:50;background:var(--card);box-shadow:0 4px 16px rgba(0,0,0,.06)}
+    .nav{max-width:var(--maxw);margin:auto;display:flex;align-items:center;gap:10px;justify-content:space-between;padding:var(--pad)}
+    .logo{font-weight:800;font-size:clamp(18px,4vw,24px)}
+    .menu{display:flex;gap:8px;flex-wrap:wrap}
+    .pill{display:inline-flex;align-items:center;justify-content:center;padding:10px 14px;border:1px solid var(--ink);border-radius:999px;min-height:42px}
     .pill:hover{background:var(--ink);color:#fff}
+    .badge{background:#000;color:#fff;border-radius:999px;padding:6px 12px;font-size:12px}
     /* Hero */
     .hero{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--card)}
+    .hero-inner{max-width:var(--maxw);margin:auto;text-align:center;padding:clamp(16px,6vw,30px) var(--pad)}
+    .hero h1{margin:0 0 6px;font-size:clamp(20px,6vw,32px)}
+    .hero p{margin:0;color:var(--sub);font-size:clamp(13px,3.5vw,15px)}
+    /* Main */
+    .wrap{max-width:var(--maxw);margin:auto;padding:var(--pad)}
+    .card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
+    .card-pad{padding:var(--pad)}
+    .title{margin:0 0 12px;text-align:center;font-weight:800;font-size:clamp(16px,4.5vw,20px)}
+    /* Translator full width */
+    .input-group{margin-bottom:12px}
+    .lbl{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;color:#222;font-weight:700;font-size:clamp(13px,3.6vw,15px)}
+    .hint{font-size:clamp(11px,3.2vw,13px);color:var(--sub);margin-left:8px}
     textarea{
+      width:100%;min-height:clamp(140px,30vh,220px);resize:vertical;border:1px solid #ddd;border-radius:12px;
+      padding:14px 12px;font-size:clamp(14px,3.6vw,16px);background:#fafafa;outline:none;transition:border .2s,background .2s;
     }
     textarea:focus{border-color:#555;background:#fff}
     .btn{
+      width:100%;display:inline-flex;align-items:center;justify-content:center;gap:10px;
+      padding:clamp(12px,3.5vw,14px);border:none;border-radius:12px;background:var(--brand);color:var(--brand-ink);
+      font-weight:900;cursor:pointer;touch-action:manipulation;min-height:48px;
     }
+    .btn[disabled]{opacity:.6}
+    .result{border:1px solid var(--line);background:#fafafa;border-radius:12px;padding:14px;min-height:clamp(84px,16vh,120px)}
+    .result h4{margin:0 0 6px;font-size:clamp(12px,3.2vw,13px);color:var(--sub)}
+    .result-text{font-size:clamp(14px,3.6vw,16px);white-space:pre-wrap;color:#000}
+    .note{font-size:clamp(11px,3vw,12px);color:var(--sub);margin-top:8px}
+    /* History under translator */
+    .history{margin-top:var(--gap)}
+    .list{margin:0;padding-left:20px}
     .list li{margin-bottom:6px}
     /* Footer */
+    footer{margin-top:var(--gap);background:var(--card);border-top:1px solid var(--line)}
+    .foot{max-width:var(--maxw);margin:auto;padding:var(--pad);text-align:center}
+    .copy{font-size:clamp(11px,3vw,12px);color:var(--sub)}
+    /* Safe area iphones */
     body{padding-bottom:env(safe-area-inset-bottom)}
   </style>
 </head>
 <body>
 <header>
+  <div class="nav" role="navigation" aria-label="Menu utama">
     <div class="logo">PapuaTranslate</div>
+    <nav class="menu">
       <a class="pill" href="/">Home</a>
       <a class="pill" href="/about">About</a>
       <a class="pill" href="/#history">History</a>
       {% if logged_in %}
+        <span class="badge" aria-label="Status login aktif">Aktif</span>
         <a class="pill" href="/logout">Logout</a>
       {% else %}
         <a class="pill" href="/login">Login</a>
         <a class="pill" href="/register">Daftar</a>
       {% endif %}
+    </nav>
   </div>
 </header>
     <div class="input-group">
       <div class="lbl">
+        <label for="papua-input">Bahasa Papua</label>
         <span class="hint">Masukkan teks berlogat Papua</span>
       </div>
+      <textarea id="papua-input" inputmode="text" autocomplete="off" spellcheck="false" placeholder="Contoh: 'ko su makan' → 'Kamu sudah makan.'"></textarea>
     </div>
+    <button class="btn" id="translate-btn" onclick="translateText()" aria-label="Terjemahkan">
       <span id="btn-text">Terjemahkan</span>
       <span id="btn-spin" aria-hidden="true" style="display:none">⏳</span>
     </button>
+    <div class="input-group" style="margin-top:12px">
       <div class="lbl">
+        <label for="indonesia-output">Bahasa Indonesia Baku</label>
         <span class="hint">Hasil terjemahan</span>
       </div>
+      <div class="result" id="indonesia-output-wrap">
         <h4>Terjemahan:</h4>
         <div id="indonesia-output" class="result-text">Hasil terjemahan akan ditampilkan di sini…</div>
       </div>
   </section>
   <!-- History under translator -->
+  <section class="card card-pad history" id="history" aria-live="polite">
     <h2 class="title">Riwayat Terakhir</h2>
     <ul class="list" id="history-list">
       {% for it in recent %}
 </footer>
 <script>
+  // Auto-resize textarea (nyaman di HP)
+  const ta = document.getElementById('papua-input');
+  function autoresize(){ ta.style.height='auto'; ta.style.height=(ta.scrollHeight+6)+'px'; }
+  ta.addEventListener('input', autoresize); window.addEventListener('load', autoresize);
   async function translateText() {
     const input = document.getElementById('papua-input');
     const out = document.getElementById('indonesia-output');
     const btnSpin = document.getElementById('btn-spin');
     const text = input.value.trim();
+    if (!text) { out.textContent = "Silakan masukkan teks logat Papua."; input.focus(); return; }
     out.textContent = "Menerjemahkan…";
     btn.disabled = true; btnText.style.display='none'; btnSpin.style.display='inline';
       const r = await fetch('/translate', {
         method: 'POST',
         headers: {'Content-Type':'application/json'},
+        credentials: 'same-origin',
         body: JSON.stringify({ text, max_new_tokens: 24 })
       });
       const data = await r.json();
       if (r.ok && data && (data.mt || data.result)) {
         out.textContent = data.mt || data.result;
         loadHistory();
+        // scroll ke hasil di layar kecil
+        if (window.innerWidth < 700) document.getElementById('indonesia-output-wrap').scrollIntoView({behavior:'smooth', block:'center'});
       } else {
         out.textContent = 'Error: ' + ((data && (data.error || data.detail)) || 'Terjadi kesalahan.');
       }
   }
   // Ctrl/Cmd + Enter shortcut
+  ta.addEventListener('keydown', (e)=>{
     if (e.key === 'Enter' && (e.ctrlKey || e.metaKey)) translateText();
   });
 </script>

papua-lora-ckpt-168 DELETED Viewed

	@@ -1 +0,0 @@
1	- Subproject commit 17f6bcc097a64e04f3ce0538e821ce8a7b3cb474