binarythinkers89/deploy

1<!doctype html>2<html lang="en">3<head>4  <meta charset="utf-8">5  <meta name="viewport" content="width=device-width, initial-scale=1">6  <title>Political View Prediction</title>7  <style>8    body{font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;margin:0;padding:24px;background:#f7f7f8;color:#101114}9    .container{max-width:980px;margin:0 auto;background:#fff;border:1px solid #e5e7eb;border-radius:12px;box-shadow:0 2px 6px rgba(0,0,0,.06);padding:24px}10    h1{font-size:20px;margin:0 0 12px}11    .block{margin:14px 0;padding:12px;border:1px solid #e5e7eb;border-radius:10px;background:#fafafa}12    .label{font-size:14px;margin-bottom:8px;white-space:pre-wrap}13    .input{width:100%;border:1px solid #d1d5db;border-radius:8px;padding:10px}14    button{background:#16a34a;color:#fff;border:none;border-radius:8px;padding:10px 16px;cursor:pointer;margin-top:12px}15    button:disabled{opacity:.6;cursor:not-allowed}16    .result{margin-top:16px;padding:12px;border-radius:8px;background:#f1f5f9;border:1px solid #e2e8f0;font-family:ui-monospace,Menlo,Consolas,monospace;white-space:pre-wrap}17    .nav{margin-bottom:12px}18    .nav a{margin-right:8px;text-decoration:none;color:#2563eb}19  </style>20  <script>21    const fLabelMap = {22      'F1': '1. What is your age?\nআপনার বয়স কত?',23      'F2': '2.  What is your gender?\nআপনার লিঙ্গ কী?',24      'F3': '3. Are you currently a student?\nআপনি কি বর্তমানে ছাত্র/ছাত্রী?',25      'F4': '4. What is your Highest education level?\nসর্বোচ্চ শিক্ষাগত যোগ্যতা?',26      'F5': '5. Which district do you currently live in?\nআপনি বর্তমানে কোন জেলায় থাকেন?',27      'F6': '6. Have you ever voted?\nআপনি কি কখনও ভোট দিয়েছেন?',28      'F7': '7. Which media platform do you primarily use to follow political news? (Multiple Choice up to 3)\nরাজনৈতিক খবর জানার জন্য আপনি প্রধানত কোন মাধ্যম ব্যবহার করেন?',29      'F8': '8. Which issue is your highest priority when casting your vote?\nভোট দেওয়ার সময় আপনার সবচেয়ে অগ্রাধিকার কোনটি?',30      'F9': "9. Which party's offline and online campaign is most visible?\nকোন দলের অফলাইন এবং অনলাইন প্রচারণা সবচেয়ে বেশি দৃশ্যমান?",31      'F10': '10. Main reason for distrust in politicians?\nরাজনীতিবিদদের অবিশ্বাসের প্রধান কারণ কী?',32      'F11': '11. What are the best ways for political leaders to connect with Gen Z voters?\nরাজনৈতিক নেতারা Gen Z ভোটারদের সাথে যোগাযোগের সেরা উপায় কী?',33      'F12': "12. What change would you most like to see in Bangladesh's political system?\nবাংলাদেশের রাজনৈতিক ব্যবস্থায় আপনি সবচেয়ে কোন পরিবর্তন দেখতে চান?",34      'F13': '13. Social media is my primary political information source.\nসোশ্যাল মিডিয়া আমার রাজনৈতিক তথ্যের প্রধান উৎস।',35      'F14': '14. National election results have a significant impact on my daily life.\nজাতীয় নির্বাচনের ফলাফল আমার দৈনন্দিন জীবনে উল্লেখযোগ্য প্রভাব ফেলে।',36      'F15': "15. Politicians' social media activity influences me.\nরাজনীতিবিদদের সোশ্যাল মিডিয়া কার্যক্রম আমাকে প্রভাবিত করে।",37      'F16': '16. Viral trends impact my voting decisions.\nভাইরাল ট্রেন্ড আমার ভোটের সিদ্ধান্তকে প্রভাবিত করে।',38      'F17': '17.  How much do you believe in a new political party?\nনতুন একটি রাজনৈতিক দলের ওপর আপনার বিশ্বাস কতটুকু?',39      'F18': '18. How much do you trust political influencers on social media?\nসোশ্যাল মিডিয়ায় রাজনৈতিক ইনফ্লুয়েন্সারদের প্রতি আপনার আস্থা কতটা?',40      'F19': '19. How much do you trust national election results to be accurate?\nজাতীয় নির্বাচনের ফলাফল সঠিক হয় বলে আপনি কতটা বিশ্বাস করেন?',41      'F20': '20.  Which of the following influences your voting decision the most?\nনিচের কোনটি আপনার ভোটের সিদ্ধান্তকে সবচেয়ে বেশি প্রভাবিত করে?',42      'F21': '21. Which of the following institutions do you trust the most?\nনিচের কোন সংস্থার প্রতি আপনার সবচেয়ে বেশি আস্থা আছে?',43      'F22': '22.  Which of the following national issues do you think the government should solve first?\nআপনার মতে, নিচের কোন জাতীয় বিষয়টি সরকারকে সবার আগে সমাধান করা উচিত?',44      'F23': '23. Which of the following do you think most reduces political trust?\nআপনার মতে, নিচের কোনটি রাজনৈতিক আস্থাকে সবচেয়ে বেশি কমিয়ে দেয়?',45      'F24': '24.  Which of the following election campaign channels do you find most effective?\nনিচের কোন নির্বাচনী প্রচার মাধ্যমটি আপনি সবচেয়ে কার্যকর মনে করেন?',46      'F25': '25.  Which of the following is most important to you when choosing a political candidate?\nএকজন রাজনৈতিক প্রার্থীকে বেছে নেওয়ার সময় আপনার কাছে নিচের কোন বিষয়টি সবচেয়ে গুরুত্বপূর্ণ?',47      'F26': '26. Have you ever changed your vote due to social media content?\nআপনি কি কখনও সোশ্যাল মিডিয়ার কারণে আপনার ভোটের পছন্দ পরিবর্তন করেছেন?',48      'F27': '27. Do you use fact-checking or AI tools before sharing news?\nখবর শেয়ার করার আগে আপনি কি ফ্যাক্ট-চেকিং বা এআই টুল ব্যবহার করেন?',49      'F28': '28. How politically aware is Gen Z?\nজেনারেশন জেড কতটা রাজনৈতিকভাবে সচেতন?',50      'F29': '29. How often do you post about politics on social media?\nআপনি সোশ্যাল মিডিয়ায় রাজনীতি নিয়ে কত ঘন ঘন পোস্ট করেন?'51    };52    async function predict(){53      const out = document.getElementById('result');54      const btn = document.getElementById('predictBtn');55      btn.disabled = true;56      const payload = {};57      document.querySelectorAll('[data-key]').forEach(inp=>{58        payload[inp.dataset.key] = inp.value ?? '';59      });60      out.textContent = 'Requesting...';61      62      // Determine endpoint based on current page63      const isViewPage = window.location.pathname.includes('/view');64      const endpoint = isViewPage ? '/predict_view' : '/predict';65      66      try{67        const res = await fetch(endpoint,{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify(payload)});68        const json = await res.json();69        70        if(json.error) {71           out.textContent = 'Error: ' + json.error;72        } else if(isViewPage && json.predicted_view) {73           out.textContent = 'Predicted Political View: ' + json.predicted_view;74        } else if(!isViewPage && json.predicted_engagement) {75           out.textContent = 'Predicted Engagement: ' + json.predicted_engagement;76        } else {77           out.textContent = JSON.stringify(json, null, 2);78        }79      }catch(e){80        out.textContent = 'Network error';81      }finally{82        btn.disabled = false;83      }84    }85    window.addEventListener('DOMContentLoaded',async()=>{86      const isViewPage = window.location.pathname.includes('/view');87      document.querySelector('h1').textContent = isViewPage ? 'Political View Prediction' : 'Engagement Prediction';88      document.getElementById('predictBtn').textContent = isViewPage ? 'Predict View' : 'Predict Engagement';89      document.title = isViewPage ? 'Political View Prediction' : 'Engagement Prediction';90 91      const wrap = document.getElementById('form');92      let keys = [];93      let categories = {};94      try{95        const r = await fetch('/schema');96        const j = await r.json();97        if (Array.isArray(j.feature_columns) && j.feature_columns.length){98          keys = j.feature_columns;99        }100        if (j.categories) categories = j.categories;101      }catch(e){}102      if (!keys.length){103        keys = Object.keys(fLabelMap);104      }105      keys.forEach(q=>{106        const block = document.createElement('div');107        block.className = 'block';108        const label = document.createElement('div');109        label.className = 'label';110        label.textContent = fLabelMap[q] || q;111        let control;112        if (Array.isArray(categories[q]) && categories[q].length){113          const select = document.createElement('select');114          select.className = 'input';115          select.dataset.key = q;116          const optEmpty = document.createElement('option');117          optEmpty.value = '';118          optEmpty.textContent = '-- select --';119          select.appendChild(optEmpty);120          categories[q].forEach(val=>{121            const opt = document.createElement('option');122            opt.value = val;123            opt.textContent = val;124            select.appendChild(opt);125          });126          control = select;127        } else {128          const input = document.createElement('input');129          input.className = 'input';130          input.type = 'text';131          input.dataset.key = q;132          control = input;133        }134        block.appendChild(label);135        block.appendChild(control);136        wrap.appendChild(block);137      });138      document.getElementById('predictBtn').addEventListener('click',predict);139    });140  </script>141<head>142<body>143  <div class="container">144    <div class="nav"><a href="/">Engagement</a> | <a href="/view">Political View</a></div>145    <h1>Political View Prediction</h1>146    <div id="form"></div>147    <button id="predictBtn">Predict View</button>148    <div id="result" class="result"></div>149  </div>150  </body>151</html>152