Spaces:
Sleeping
Sleeping
| <html> | |
| <head> | |
| <title>VeriGov</title> | |
| <meta name="viewport" content="width=device-width, initial-scale=0.5"> | |
| <link rel="icon" type="image/x-icon" href="../static/VeriGovLogo.png"> | |
| <link rel="stylesheet" href="../static/assets/css/all.min.css"> | |
| <style> | |
| body { | |
| background-color: #fffaf5; | |
| zoom:100% | |
| /*Cross browser zoom | |
| -moz-transform: scale(1); | |
| -moz-transform-origin: 0 0; | |
| -o-transform: scale(1); | |
| -o-transform-origin: 0 0; | |
| -webkit-transform: scale(1); | |
| -webkit-transform-origin: 0 0; | |
| transform: scale(1); | |
| transform-origin: 0 0;*/ | |
| } | |
| footer { | |
| margin-top: 100px; | |
| font-family: Arial, sans-serif; | |
| text-align: center; | |
| border-radius: 17px 17px 0px 0px; | |
| padding: 3px; | |
| background-color: rgb(251, 221, 183); | |
| box-shadow: 0px 0px 11.8px #264653; | |
| color: rgb(0, 0, 0); | |
| /*text-shadow: 0px 2px 8px #5b5b5b;*/ | |
| } | |
| a:visited { | |
| color: #06c; | |
| background-color: transparent; | |
| text-decoration: none; | |
| } | |
| .description b { | |
| font-weight: 700; | |
| text-decoration-line: underline; | |
| background-color: antiquewhite; | |
| } | |
| #summary>b { | |
| font-weight: 700; | |
| text-decoration-line: underline; | |
| background-color: none; | |
| } | |
| i { | |
| --fa-animation-duration: 2s; | |
| } | |
| * { | |
| box-sizing: border-box; | |
| } | |
| .tooltip { | |
| position: relative; | |
| } | |
| .tooltip .tooltiptext { | |
| box-shadow: 0px 0px 11.8px #264653; | |
| visibility: hidden; | |
| width: 120px; | |
| background-color: #014253; | |
| color: #fff; | |
| text-align: center; | |
| border-radius: 6px; | |
| padding: 5px 0; | |
| position: absolute; | |
| z-index: 1; | |
| top: -5px; | |
| left: 80%; | |
| } | |
| .tooltip .tooltiptext::after { | |
| content: ""; | |
| position: absolute; | |
| top: 50%; | |
| right: 100%; | |
| margin-top: -5px; | |
| border-width: 5px; | |
| border-style: solid; | |
| border-color: transparent #264653 transparent transparent; | |
| } | |
| .tooltip:hover .tooltiptext { | |
| visibility: visible; | |
| } | |
| .tooltip:focus .tooltiptext { | |
| visibility: visible; | |
| } | |
| .tooltip:active .tooltiptext { | |
| visibility: visible; | |
| } | |
| .description { | |
| max-width: 1200px; | |
| } | |
| .description>h1 { | |
| font-size: 60px; | |
| font-family: Arial, sans-serif; | |
| user-select: none; | |
| } | |
| .description p { | |
| font-family: Arial, sans-serif; | |
| font-style: normal; | |
| font-weight: 500; | |
| font-size: 20px; | |
| } | |
| ::selection { | |
| background: #d2c8b9; | |
| /* WebKit/Blink Browsers */ | |
| } | |
| ::-moz-selection { | |
| background: #d2c8b9; | |
| /* Gecko Browsers */ | |
| } | |
| .query-input { | |
| /* Rectangle 2 */ | |
| /*box-sizing: border-box;*/ | |
| width: auto; | |
| height: 50px; | |
| background: #ffffff; | |
| border: 6px solid #2A9D8F; | |
| box-shadow: 0px 0px 11.8px #264653; | |
| border-radius: 6px 6px 6px 6px; | |
| font-family: Veranda, sans-serif; | |
| font-style: normal; | |
| font-weight: 400; | |
| font-size: 18px; | |
| padding-left: 10px; | |
| color: #484848; | |
| margin-left: 6px; | |
| } | |
| .query-input:focus { | |
| outline: none; | |
| box-shadow: 0px 0px 11.8px #264653; | |
| } | |
| .query-input::selection { | |
| color: #747474; | |
| background-color: #EAEBED; | |
| } | |
| .query-button { | |
| /* transform: translate(0px, 15px);*/ | |
| position: relative; | |
| text-align: center; | |
| font-family: Veranda, sans-serif; | |
| font-style: normal; | |
| font-weight: 700; | |
| font-size: 18px; | |
| color: white; | |
| width: 50px; | |
| height: 50px; | |
| border-style: none; | |
| background: #2A9D8F; | |
| box-shadow: 0px 0px 11.8px #264653; | |
| border-radius: 6px 6px 6px 6px; | |
| .query-button>i { | |
| width: 50px; | |
| } | |
| /*background-repeat: no-repeat; | |
| background-image: url(/home/spark/Downloads/Send\(2\).svg); | |
| background-position: center center; | |
| background-size: 40px;*/ | |
| margin: 6px; | |
| } | |
| .query-form { | |
| --box-width: 990px; | |
| position: relative; | |
| width: var(--box-width); | |
| /*left: calc(50% - calc(var(--box-width)/2)); */ | |
| } | |
| /* E.g. Water supply data from 2018 to 2024 in Cranberry Township | |
| position: absolute; | |
| width: 715px; | |
| height: 40px; | |
| left: 206px; | |
| top: 198px; | |
| font-family: Veranda, sans-serif; | |
| font-style: normal; | |
| font-weight: 400; | |
| font-size: 24px; | |
| line-height: 34px; | |
| display: flex; | |
| align-items: center; | |
| color: #747474; | |
| */ | |
| hr { | |
| margin-top: 40px; | |
| margin-bottom: 40px; | |
| width: 80%; | |
| } | |
| .chart { | |
| margin-top: 20px; | |
| } | |
| table { | |
| position: relative; | |
| background: #EAEBED; | |
| box-shadow: 0px 0px 11.8px #264653; | |
| border-radius: 17px; | |
| border-collapse: collapse; | |
| margin-bottom: 10px; | |
| } | |
| th { | |
| min-width: 300px; | |
| height: 47px; | |
| background: #264653; | |
| box-shadow: 0px 0px 11.8px #264653; | |
| font-style: normal; | |
| font-weight: 700; | |
| font-size: 18px; | |
| color: white; | |
| user-select: none; | |
| } | |
| th.r { | |
| border-radius: 0px 17px 0px 0px; | |
| padding-right: 12px; | |
| } | |
| th.m { | |
| border-radius: 0px 0px 0px 0px; | |
| padding-left: 10px; | |
| padding-right: 10px; | |
| } | |
| td.l { | |
| height: 47px; | |
| background: #264653; | |
| box-shadow: 0px 0px 11.8px #264653; | |
| font-style: normal; | |
| font-weight: 700; | |
| font-size: 18px; | |
| color: white; | |
| user-select: none; | |
| border-radius: 17px 0px 0px 0px; | |
| border-right: 0px solid #A3BAC3; | |
| border-left: 0px solid #A3BAC3; | |
| } | |
| td { | |
| border-left: 3px solid #A3BAC3; | |
| padding-left: 30px; | |
| padding-right: 30px; | |
| padding-top: 4px; | |
| text-align: center; | |
| font-style: normal; | |
| font-weight: 700; | |
| font-size: 18px; | |
| color: 303030; | |
| min-width: 100px; | |
| } | |
| td.d { | |
| border-right: 3px solid #A3BAC3; | |
| border-left: 0px solid #A3BAC3; | |
| } | |
| td.b { | |
| user-select: none; | |
| font-size: 16px; | |
| border: none | |
| } | |
| td>div { | |
| border-bottom: 3.5px solid #A3BAC3; | |
| } | |
| .separate { | |
| width: 200px; | |
| height: 0px; | |
| border: 3px solid #A3BAC3; | |
| box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.25); | |
| transform: rotate(90deg); | |
| } | |
| .attention { | |
| background: linear-gradient(270deg, rgba(244, 202, 97, 0.45) 89.78%, rgba(234, 235, 237, 0.45) 91.4%, rgba(234, 235, 237, 0.45) 99.98%); | |
| background: -webkit-linear-gradient(270deg, rgba(244, 202, 97, 0.45) 89.78%, rgba(234, 235, 237, 0.45) 91.4%, rgba(234, 235, 237, 0.45) 99.98%); | |
| } | |
| .attention>td>i { | |
| display: block; | |
| position: absolute; | |
| transform: translateY(50px); | |
| color: #F4A261; | |
| /*border: 2px solid black;*/ | |
| border-radius: 200; | |
| left: 5px; | |
| } | |
| .warning { | |
| background: linear-gradient(270deg, rgba(244, 162, 97, 0.45) 89.78%, rgba(234, 235, 237, 0.45) 91.4%, rgba(234, 235, 237, 0.45) 99.98%); | |
| background: -webkit-linear-gradient(270deg, rgba(244, 162, 97, 0.45) 89.78%, rgba(234, 235, 237, 0.45) 91.4%, rgba(234, 235, 237, 0.45) 99.98%); | |
| } | |
| .warning>td>i { | |
| display: block; | |
| position: absolute; | |
| transform: translateY(50px); | |
| color: #ff681d; | |
| /*border: 2px solid black;*/ | |
| border-radius: 200; | |
| left: 5px; | |
| } | |
| .no-data { | |
| background: linear-gradient(270deg, rgba(174, 174, 174, 0.45) 89.78%, rgba(234, 235, 237, 0.45) 91.4%, rgba(234, 235, 237, 0.45) 99.98%); | |
| background: -webkit-linear-gradient(270deg, rgba(174, 174, 174, 0.45) 89.78%, rgba(234, 235, 237, 0.45) 91.4%, rgba(234, 235, 237, 0.45) 99.98%); | |
| } | |
| .no-data>td>i { | |
| display: block; | |
| position: absolute; | |
| transform: translateY(50px); | |
| color: #5A6B72; | |
| /*border: 2px solid black;*/ | |
| border-radius: 200; | |
| left: 5px; | |
| } | |
| .fine>td>i { | |
| display: none; | |
| } | |
| .fine { | |
| background: none; | |
| } | |
| .legend { | |
| margin-bottom: 10px; | |
| width: 90%; | |
| min-height: 80px; | |
| background: #EAEBED; | |
| box-shadow: 0px 0px 11.8px #264653; | |
| border-radius: 17px; | |
| align-items: stretch; | |
| font-family: Veranda, sans-serif; | |
| overflow:scroll; | |
| height:1%; | |
| } | |
| .Results { | |
| margin-bottom: 10px; | |
| width: 90%; | |
| padding: 4px; | |
| background: #EAEBED; | |
| box-shadow: 0px 0px 11.8px #264653; | |
| border-radius: 17px; | |
| align-items: stretch; | |
| font-family: Veranda, sans-serif; | |
| } | |
| .legend-warning>div { | |
| background: rgba(244, 162, 97, 0.45); | |
| } | |
| .legend-warning>i { | |
| color: #ff681d; | |
| } | |
| .legend-attention>div { | |
| background: rgba(233, 196, 106, 0.45); | |
| } | |
| .legend-attention>i { | |
| color: #F4A261; | |
| } | |
| .legend-no-data>div { | |
| background: rgba(163, 186, 195, 0.45); | |
| } | |
| .legend-no-data>i { | |
| color: #5A6B72; | |
| } | |
| .legend-text { | |
| min-height: 80px; | |
| padding-left: 10px; | |
| padding-top: 5px; | |
| font-style: normal; | |
| font-weight: 500; | |
| font-size: 18px; | |
| text-align: left; | |
| height: 100%; | |
| float: right; | |
| width: 90%; | |
| border-radius: 0px 17px 17px 0px; | |
| } | |
| .legend>i { | |
| transform: translateY(0.25em); | |
| font-size: 48px; | |
| box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); | |
| border-radius: 200px; | |
| } | |
| .summary { | |
| margin-top: 40px; | |
| margin-bottom: 10px; | |
| width: 90%; | |
| height: 240px; | |
| background: #EAEBED; | |
| box-shadow: 0px 0px 11.8px #264653; | |
| border-radius: 17px; | |
| align-items: stretch; | |
| height: 100%; | |
| font-family: Veranda, sans-serif; | |
| } | |
| .summary-text { | |
| padding-left: 10px; | |
| padding-top: 5px; | |
| font-style: normal; | |
| font-weight: 600; | |
| font-size: 18px; | |
| text-align: left; | |
| height: 100%; | |
| float: right; | |
| width: 90%; | |
| border-radius: 0px 17px 0px 17px; | |
| } | |
| @media only screen and (max-width: 600px) { | |
| body { | |
| /* | |
| Cross browser zoom | |
| -moz-transform: scale(0.7); | |
| -moz-transform-origin: 0 0; | |
| -o-transform: scale(0.7); | |
| -o-transform-origin: 0 0; | |
| -webkit-transform: scale(0.7); | |
| -webkit-transform-origin: 0 0; | |
| transform: scale(0.7); | |
| transform-origin: 0 0; | |
| */ | |
| zoom:60% | |
| } | |
| } | |
| .summary>i { | |
| transform: translateY(0.25em); | |
| font-size: 48px | |
| } | |
| .summary>div { | |
| background: rgba(53, 143, 128, 0.45) | |
| } | |
| .summary>section { | |
| text-align: left; | |
| padding-left: 10px; | |
| font-family: Veranda, sans-serif; | |
| font-style: normal; | |
| font-weight: 500; | |
| font-size: 18px; | |
| } | |
| option { | |
| text-align: center; | |
| } | |
| .form-div { | |
| background: #EAEBED; | |
| box-shadow: 0px 0px 11.8px #264653; | |
| border-radius: 17px; | |
| margin-bottom: 10px; | |
| width: 600px; | |
| padding: 10px; | |
| overflow: hidden; | |
| height: 300px; | |
| position: relative; | |
| } | |
| .label { | |
| height: 47px; | |
| background: #264653; | |
| color: white; | |
| padding-top: 8px; | |
| box-shadow: 0px 0px 11.8px #264653; | |
| border-radius: 6px 6px 0px 0px; | |
| font-family: Veranda, sans-serif; | |
| font-style: normal; | |
| font-weight: 600; | |
| font-size: 24px; | |
| text-align: center; | |
| margin: -10px; | |
| } | |
| .form-div>ul { | |
| float: left; | |
| display: block; | |
| } | |
| .bottom-bar { | |
| position: absolute; | |
| bottom: 10px; | |
| left: 19px | |
| } | |
| .span_head { | |
| height: 47px; | |
| background: #264653; | |
| color: white; | |
| padding-top: 8px; | |
| box-shadow: 0px 0px 11.8px #264653; | |
| border-radius: 17px 17px 0px 0px; | |
| font-family: Veranda, sans-serif; | |
| font-style: normal; | |
| font-weight: 600; | |
| font-size: 24px; | |
| text-align: center; | |
| margin: -5px; | |
| } | |
| #more { | |
| display: none; | |
| } | |
| #myBtn:hover { | |
| background: #cba6a6; | |
| } | |
| #myBtn { | |
| border-radius: 10px; | |
| border: none; | |
| background-color: #d3d3d3; | |
| padding: 14px 28px; | |
| font-size: 16px; | |
| cursor: pointer; | |
| display: inline-block; | |
| color: rgb(45, 45, 45); | |
| } | |
| </style> | |
| </head> | |
| <body | |
| onload="const urlParams = new URLSearchParams(window.location.search); if(urlParams.get('developer') == null){console.log('developer not found')}else{document.getElementById('author-name').innerText='This tool was designed and developed by '+urlParams.get('developer')}" | |
| style="overflow: scroll; "> | |
| <center> | |
| <div class="description"> | |
| <span> | |
| <h1>VeriGov</h1><img src="../static/VeriGovLogo.svg" width="70px" height="auto" | |
| style="user-select: none;"> | |
| </span> | |
| <p>VeriGov is an <a href="https://en.wikipedia.org/wiki/Artificial_Intelligence" target="_blank">AI</a> tool which analyses | |
| government provided datasets and claims and summarises them. An <a | |
| href="https://www.superannotate.com/blog/llm-agents" target="_blank">LLM-Agent</a> | |
| is used to | |
| <a href="https://en.wikipedia.org/wiki/Web_scraping" target="_blank">webscrape</a> news websites and other sources which | |
| provide public records. This data is then assimilated | |
| into general, verbose remarks which are quantified and compared against the government records. A | |
| mismatch in the relative values of both the records may indicate possible malicious alteration of the | |
| government data. VeriGov also triggers attention when extreme values are reported in either of the | |
| records to alert possible neglection or mismanagement of responsibility. Insufficient data also raises | |
| an alert. | |
| </p> | |
| <span id="dots"></span> | |
| <span id="more"> | |
| <p>Currently, both the officially provided data and the collected public records <b>are not real | |
| datasets</b>, rather they were artificially generated for the purpose of this project. The | |
| government does not provide datasets with standardised formatting, hence webscraping or using their | |
| <a href="https://en.wikipedia.org/wiki/API" target="_blank">API</a>s | |
| would not have been effective. The data used still resembles what would have been the output of an | |
| API | |
| request to their website, had the resulting data been standardised. The <b>public records were not | |
| developed using an LLM-Agent</b> as that would require more computing power and a self trained | |
| <a href="https://en.wikipedia.org/wiki/Large_language_model" target="_blank">LLM</a> | |
| model to guarantee accuracy. Since the aim of this project was to illustrate detection of fraud, the | |
| <b>idea of data retrieval is only conceptualised and not implemented</b>. | |
| </p> | |
| <p>AI is prone to <a | |
| href="https://en.wikipedia.org/wiki/Hallucination_(artificial_intelligence)" target="_blank">hallucinations</a> | |
| or | |
| misjudgments. This may lead to seemingly accurate results which are | |
| completely false in reality. Therefore, the use of VeriGov should be restricted to usage as a tool | |
| to | |
| aid humans and <b>not as concrete evidence or testament</b> These alerts are only prompts to further | |
| investigation and <b>not accusations</b>.</p> | |
| </span> | |
| <button onclick="myFunction()" id="myBtn">Disclaimer</button> | |
| </div> | |
| <hr> | |
| <div> | |
| <!--<select class="query-input" name="search"> | |
| <option>Water Resources</option> | |
| </select> | |
| <select class="query-input" name="search"> | |
| <option>Cranberry Township</option> | |
| <option>Sugarland</option> | |
| </select> | |
| <input type="date" class="query-input"> | |
| <input type="date" class="query-input">--> | |
| <div class="form-div"> | |
| <div class="label" style="user-select: none;">Search Records</div> | |
| <ul style="text-align: left;"> | |
| <i id="i2" | |
| style=" display:none;font-size: 150px; margin-top: 10%; margin-left:-20px; color:rgb(187, 29, 8)" | |
| class="fa-solid fa-location-dot"></i> | |
| <i id="i1" | |
| style=" display:none; font-size: 150px; margin-top: 10%; margin-left:-20px; color:#5a6b72" | |
| class="fa-solid fa-scroll"></i> | |
| <i id="i3" style=" display:none;font-size: 150px; margin-top: 10%; margin-left:-20px; color:#3c5864" | |
| class="fa-solid fa-calendar-days"></i> | |
| </ul> | |
| <ul style="float: none;top: 80px;position: absolute;right: 50px;"> | |
| <p style="font-size: 30px; margin-left:-20px; font-weight: 800; user-select: none;"><span | |
| id="b-span">Welfare | |
| Program</span></p> | |
| </ul> | |
| <div class="bottom-bar"> | |
| <button id="back" style="display:none" class="query-button" id="restart" | |
| onclick="previousStage()"><i class="fa-solid fa-circle-left fa-xl"></i></button> | |
| <button class="query-button" id="final" onclick="nextStage()"><i id="next" | |
| class="fa-solid fa-circle-right fa-xl"></i><i id="alt-next" style="display:none" | |
| class="fa-solid fa-circle-left fa-xl"></i></button> | |
| <span><select class="query-input" id="Scheme" name="scheme"> | |
| </select> | |
| </span> | |
| <span style="display:none"><select class="query-input" id="Area" name="search"> | |
| </select> | |
| </span> | |
| <span style="display:none" id="Duration"> | |
| <input | |
| onchange="if(this.value<start_date){this.value=start_date} if(this.value>end_date){this.value=start_date}" | |
| type="date" id="start-date" class="query-input"> | |
| <input | |
| onchange="if(this.value<start_date){this.value=end_date} if(this.value>end_date){this.value=end_date} if(this.value<=get('start-date').value){this.value=end_date}" | |
| type="date" id="end-date" class="query-input"> | |
| </span> | |
| </div> | |
| </div> | |
| </div> | |
| <hr> | |
| <div class="chart" id="chart" style="display:none"> | |
| <div class="Results"> | |
| <div> | |
| <div class="span_head"><span style="font-size:24px; font-weight:bold">Results</span></div> | |
| <br><br> | |
| <p class="summary-text" style="float:none; height:auto; font-weight: 500;">Here are the findings | |
| from the analysis. The table displays government and implied public records based on the | |
| comments. Click on the entries in the 'Public Records' column to view the details indicated by | |
| the remarks. Please note that all interpretations are compared to a control value within each | |
| dataset, making them dynamic. Therefore, the value of 'Sufficient' may vary across different | |
| datasets. Additionally, a 'Credibility Score' is calculated based on discrepancies and | |
| significant alerts collected. A higher score indicates a lower necessity for additional | |
| investigation.</p> | |
| </div> | |
| </div> | |
| <hr> | |
| <h1 id="table-title">Title</h1> | |
| <table id="table-doc"> | |
| <tr> | |
| <td class="l">Date</td> | |
| <th class="m">Government Records <span id="unit"></span></th> | |
| <th class="r">Public Records (Remarks)</th> | |
| </tr> | |
| </table> | |
| </div> | |
| <div id="explanation" style="display:none"> | |
| <div id="warning" class="legend-warning legend"> | |
| <div class="legend-text"><span style="font-size:24px; font-weight:bold">Mismatch</span><br>This shows | |
| possible fraudulent activity due to mismatched government and public records.</div> | |
| <i class="fa-solid fa-circle-exclamation"></i> | |
| </div> | |
| <div id="attention" class="legend-attention legend"> | |
| <div class="legend-text"><span style="font-size:24px; font-weight:bold">Attention</span><br>Extreme | |
| values being reported in both records may be of concern and should be addressed.</div> | |
| <i class="fa-solid fa-circle-exclamation"></i> | |
| </div> | |
| <div id="no-data" class="legend-no-data legend"> | |
| <div class="legend-text"><span style="font-size:24px; font-weight:bold">Insufficient | |
| Data</span><br>The | |
| lack of data in either of the records prevents analysis. Please check availability of data.</div> | |
| <i class="fa-solid fa-circle-exclamation"></i> | |
| </div> | |
| <hr> | |
| <div id="summary" class="summary"> | |
| <div class="summary-text"><span style="font-size:24px; font-weight:bold">Summary</span><br>Dataset | |
| Credibility Score: <span id="data_scorep">4/10</span></div> | |
| <i style="color: rgba(20, 116, 111, 1)" class="fa-solid fa-microchip"></i> | |
| <br> | |
| <br> | |
| <section> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut | |
| labore | |
| et dolore magna aliqua. Diam phasellus vestibulum lorem sed risus ultricies tristique. A arcu | |
| cursus | |
| vitae congue mauris rhoncus aenean vel. Sed cras ornare arcu dui vivamus arcu felis bibendum. | |
| Nulla | |
| pharetra diam sit amet nisl. Diam phasellus vestibulum lorem sed risus ultricies tristique. A | |
| arcu | |
| cursus vitae congue mauris rhoncus aenean vel. </p> | |
| </section> | |
| </div> | |
| </div> | |
| </center> | |
| <footer> | |
| <p>Hello! <span id="author-name"></span><br>If you would like to see the code for this tool, visit: <a href="https://huggingface.co/spaces/HuggingFace-SK/VeriGov/tree/main" target="_blank">VeriGov Files</a> | |
| </p> | |
| <img style="box-shadow: 0px 0px 11.8px #000000; border-radius:25px;" width="50px" height="auto" | |
| src="static/Logo.svg"> | |
| </footer> | |
| <script> | |
| var stringer; | |
| var stages = ["start", "scheme", "area", "duration"] | |
| var stage = stages[0] | |
| var local_path = [] | |
| var start_date = "" | |
| var end_date = "" | |
| var scale; | |
| var threashold; | |
| var metadata = {} | |
| var tolerance; | |
| control = {} | |
| var records = {} | |
| var quantifiedRecords = {} | |
| async function fetch_api(url = "", data = {}) { | |
| const response = await fetch(url, { | |
| method: "POST", // *GET, POST, PUT, DELETE, etc. | |
| mode: "cors", // no-cors, *cors, same-origin | |
| cache: "no-cache", // *default, no-cache, reload, force-cache, only-if-cached | |
| credentials: "same-origin", // include, *same-origin, omit | |
| headers: { | |
| "Content-Type": "application/json", | |
| // 'Content-Type': 'application/x-www-form-urlencoded', | |
| }, | |
| redirect: "manual", // manual, *follow, error | |
| referrerPolicy: "no-referrer", // no-referrer, *no-referrer-when-downgrade, origin, origin-when-cross-origin, same-origin, strict-origin, strict-origin-when-cross-origin, unsafe-url | |
| body: JSON.stringify(data), // body data type must match "Content-Type" header | |
| }); | |
| return response; // parses JSON response into native JavaScript objects | |
| } | |
| function previousStage() { | |
| if (stage == "area") { | |
| console.log("setting back to scheme") | |
| get("back").style.display = "none" | |
| stage = "scheme" | |
| get("Scheme").innerHTML = "" | |
| stage_start() | |
| return; | |
| } | |
| if (stage == "duration") { | |
| console.log("setting back to area") | |
| stage = "area" | |
| get("Area").innerHTML = "" | |
| stage_scheme() | |
| return; | |
| } | |
| } | |
| async function nextStage() { | |
| console.log(stage) | |
| if (stage == "start") { | |
| stage = "scheme" | |
| stage_start() | |
| return; | |
| } | |
| if (stage == "scheme") { | |
| get("back").style.display = "inline" | |
| console.log("dis") | |
| //await until(_ => get("Scheme").value != ""); | |
| stage = "area" | |
| stage_scheme() | |
| return; | |
| } | |
| if (stage == "area") { | |
| console.log("dis") | |
| //await until(_ => get("Area").value != ""); | |
| stage = "duration" | |
| stage_area() | |
| return; | |
| } | |
| if (stage == "duration") { | |
| //await until(_ => get("Duration").value != ""); | |
| stage = "query" | |
| get("next").style.display = "none" | |
| get("back").style.display = "none" | |
| get("alt-next").style.display = "block" | |
| query(); | |
| return | |
| } | |
| if (stage == "query") { | |
| window.location.reload(); | |
| } | |
| } | |
| async function stage_start() { | |
| get("final").setAttribute("disabled", "disabled"); | |
| console.log("start") | |
| local_path = "" | |
| get("i1").style.display = "block" | |
| get("i2").style.display = "none" | |
| get("i3").style.display = "none" | |
| get("b-span").innerHTML = "Welfare Program" | |
| get("Scheme").parentElement.style = "display:inline" | |
| get("Area").parentElement.style = "display:none" | |
| var ret = await fetch_api("/folders", { path: local_path }) | |
| var retJson = await ret.json() | |
| get("Scheme").innerHTML = "" | |
| retJson.forEach(element => { | |
| get("Scheme").innerHTML = get("Scheme").innerHTML + "<option>" + element + "</option>" | |
| }); | |
| get("final").removeAttribute("disabled"); | |
| console.log("ena") | |
| } | |
| async function stage_scheme() { | |
| get("final").setAttribute("disabled", "disabled"); | |
| console.log("scheme") | |
| get("i1").style.display = "none" | |
| get("i2").style.display = "block" | |
| get("i3").style.display = "none" | |
| get("b-span").innerHTML = "Location" | |
| local_path = "/" + get("Scheme").value | |
| get("Scheme").parentElement.style = "display:none" | |
| get("Area").parentElement.style = "display:inline" | |
| get("Duration").style = "display:none" | |
| var ret = await fetch_api("/folders", { path: local_path }) | |
| var retJson = await ret.json() | |
| get("Area").innerHTML = "" | |
| retJson.forEach(element => { | |
| get("Area").innerHTML = get("Area").innerHTML + "<option>" + element + "</option>" | |
| }); | |
| get("final").removeAttribute("disabled"); | |
| console.log("ena") | |
| } | |
| async function stage_area() { | |
| get("final").setAttribute("disabled", "disabled"); | |
| console.log("area") | |
| get("i1").style.display = "none" | |
| get("i2").style.display = "none" | |
| get("i3").style.display = "block" | |
| get("b-span").innerHTML = "Duration" | |
| local_path = "/" + get("Scheme").value + "/" + get("Area").value | |
| get("Area").parentElement.style = "display:none" | |
| get("Duration").style = "display:inline" | |
| var ret = await fetch_api("/folders", { path: local_path }) | |
| var retJson = await ret.json() | |
| var ret = await fetch_api("/files", { file: local_path + "/" + retJson[0] }) | |
| var retJson = await ret.json() | |
| control = retJson["control"] | |
| start_date = retJson["range"]["start"] | |
| end_date = retJson["range"]["end"] | |
| records = retJson["records"] | |
| metadata = retJson["metadata"] | |
| get("start-date").value = start_date; | |
| get("end-date").value = end_date; | |
| get("final").removeAttribute("disabled"); | |
| console.log("ena") | |
| } | |
| nextStage(); | |
| async function query() { | |
| get("final").removeAttribute("disabled"); | |
| var cache = await fetch_api("/load_cache", {}) | |
| var cacheJSON = await cache.json() | |
| var word = "" | |
| elementnum = 0 | |
| Object.entries(records).forEach(element => { | |
| if (element[0] < get("start-date").value || element[0] > get("end-date").value) { | |
| delete records[element[0]] | |
| } | |
| elementnum++ | |
| }); | |
| console.log(records) | |
| Object.entries(records).forEach(element => { | |
| console.log(element[0]) | |
| var dateKey = element[0] | |
| var govtKey = Object.entries(element[1])[0][0] | |
| quantifiedRecords[dateKey] = {} | |
| console.log(dateKey) | |
| console.log(govtKey) | |
| word = Object.entries(element[1])[0][1]; | |
| if (cacheJSON[word]) { | |
| quantifiedRecords[dateKey][govtKey] = cacheJSON[word] | |
| } | |
| else { | |
| quantifiedRecords[dateKey][govtKey] = "NOT_ADDED" | |
| addQuantified(dateKey, govtKey, word) | |
| } | |
| }); | |
| console.log(quantifiedRecords) | |
| scale = control["Sufficient"] / findValue(cacheJSON["Sufficient"][0]) | |
| threashold = control["Sufficient"] / 2.5 | |
| console.log(scale) | |
| tolerance = scale / 16 | |
| renderTable() | |
| /*Object.entries(quantifiedRecords).forEach(element => { | |
| quantifiedRecords[element[0]]["quantified"]="newval" | |
| });*/ | |
| } | |
| async function addQuantified(date, govt, toQuantify) { | |
| response = await fetch_api("/evaluate", { word: toQuantify }) | |
| responseJSON = response.json() | |
| quantifiedRecords[date][govt] = await responseJSON; | |
| } | |
| function get(id) { | |
| return document.getElementById(id) | |
| } | |
| function until(conditionFunction) { | |
| const poll = resolve => { | |
| if (conditionFunction()) resolve(); | |
| else setTimeout(_ => poll(resolve), 400); | |
| } | |
| return new Promise(poll); | |
| } | |
| function findValue(array) { | |
| var ret; | |
| if (array[0]["label"] == "positive") { | |
| return array[0]["score"] | |
| } | |
| else if (array[1]["label"] == "positive") { | |
| return array[1]["score"] | |
| } | |
| else if (array[2]["label"] == "positive") { | |
| return array[2]["score"] | |
| } | |
| } | |
| function findNegValue(array) { | |
| var ret; | |
| if (array[0]["label"] == "negative") { | |
| return array[0]["score"] | |
| } | |
| else if (array[1]["label"] == "negative") { | |
| return array[1]["score"] | |
| } | |
| else if (array[2]["label"] == "negative") { | |
| return array[2]["score"] | |
| } | |
| } | |
| function findNeuValue(array) { | |
| var ret; | |
| if (array[0]["label"] == "neutral") { | |
| return array[0]["score"] | |
| } | |
| else if (array[1]["label"] == "neutral") { | |
| return array[1]["score"] | |
| } | |
| else if (array[2]["label"] == "neutral") { | |
| return array[2]["score"] | |
| } | |
| } | |
| function renderFlags() { | |
| var total_entries = 0; | |
| var govt_scheme = get("Scheme").value | |
| var govt_below = 0; | |
| var govt_above = 0; | |
| var extreme = 0; | |
| var insufficient = 0; | |
| Object.entries(quantifiedRecords).forEach(element => { | |
| total_entries++ | |
| var quantifiedArray = Object.entries(quantifiedRecords[element[0]])[0][1][0] | |
| var asserted = Number(Object.entries(element[1])[0][0]) | |
| var expected = ((findValue(quantifiedArray)) * scale) | |
| get("tooltip" + element[0]).innerText = roundNumber(expected, 0) | |
| //console.log("Entry",asserted, expected) | |
| if ((findValue(quantifiedArray) == 0 && findNegValue(quantifiedArray) == 0 && findNeuValue(quantifiedArray) == 0) || asserted != asserted) { | |
| insufficient++ | |
| console.log(asserted, expected, "No Data") | |
| get(element[0]).parentElement.className = "no-data" | |
| get("no-data").style.display = "block" | |
| return | |
| } | |
| else if ((asserted + tolerance * 2 < expected) || (asserted - tolerance > expected)) { | |
| console.log(asserted, expected, "Mismatch") | |
| get(element[0]).parentElement.className = "warning" | |
| get("warning").style.display = "block" | |
| if ((asserted + tolerance * 2 < expected)) { | |
| govt_below++ | |
| } else { | |
| govt_above++ | |
| } | |
| return | |
| } | |
| else if ((findNegValue(quantifiedArray) > 0.4) || (asserted < threashold)) { | |
| extreme++ | |
| console.log(asserted, expected, "Attention") | |
| get(element[0]).parentElement.className = "attention" | |
| get("attention").style.display = "block" | |
| return | |
| } | |
| else { | |
| console.log(asserted, expected, "Fine") | |
| get(element[0]).parentElement.className = "fine" | |
| } | |
| }) | |
| get("summary").getElementsByTagName("section")[0].getElementsByTagName("p")[0].innerHTML = "Upon meticulous scrutiny, the <b>" + govt_scheme + "</b> scheme was subjected to a comprehensive analysis, accounting a total of <b>" + total_entries + "</b> documented entries. The investigative process brought to light <b>" + govt_above + "</b> instances where government data surpassed public records, alongside <b>" + govt_below + "</b> instances where government data was lower. The occurrence of <b>" + extreme + "</b> values at an extreme low on both ends, hints at a potential need for appropriate care. Furthermore, the identification of <b>" + insufficient + "</b> cases of insufficient data underscores the importance of data integrity in the analysis." | |
| var data_score = 10 | |
| data_score = data_score - ((data_score / 6) * (govt_above) + (data_score / 8) * (govt_below) + (data_score / 10) * (insufficient) + (data_score / 7) * (extreme)) | |
| data_score = roundNumber(data_score, 0) | |
| get("data_scorep").innerHTML = data_score + "/10" | |
| } | |
| function renderTable() { | |
| get("table-title").innerHTML = metadata["title"] | |
| get("unit").innerHTML = metadata["unit"] | |
| Object.entries(records).forEach(element => { | |
| var div = document.createElement("div"); | |
| var row = document.createElement("tr"); | |
| row.className = "fine" | |
| var gov = document.createElement("td") | |
| gov.innerHTML = "<div>" + Object.entries(element[1])[0][0] + "</div>" | |
| var icon = document.createElement("i") | |
| icon.classList = ["fa-solid", "fa-circle-exclamation", "fa-shake", "exc"] | |
| var pub = document.createElement("td") | |
| div.innerHTML = Object.entries(element[1])[0][1] + '<span id="' + 'tooltip' + element[0] + '" class="tooltiptext"></span>' | |
| div.className = "tooltip" | |
| var pub = document.createElement("td") | |
| pub.appendChild(div) | |
| var dat = document.createElement("td") | |
| dat.className = "d" | |
| dat.id = element[0] | |
| dat.innerHTML = '<i class="fa-solid fa-circle-exclamation fa-shake exc"></i><div>' + element[0] + '</div>' | |
| row.appendChild(dat) | |
| row.appendChild(gov) | |
| row.appendChild(pub) | |
| get("table-doc").appendChild(row) | |
| //document.getElementById("myDIV").appendChild(para); | |
| element[0] | |
| }); | |
| get("attention").style.display = "none" | |
| get("no-data").style.display = "none" | |
| get("warning").style.display = "none" | |
| setTimeout(function () { | |
| renderFlags() | |
| }, 1000); | |
| get("table-doc").innerHTML = get("table-doc").innerHTML + '<tr><td class="b"> </td><td class="b"> </td></tr>' | |
| get("chart").style.display = "block" | |
| get("explanation").style.display = "block" | |
| } | |
| function roundNumber(number, digits) { | |
| var multiple = Math.pow(10, digits); | |
| var rndedNum = Math.round(number * multiple) / multiple; | |
| return rndedNum; | |
| } | |
| function myFunction() { | |
| var dots = document.getElementById("dots"); | |
| var moreText = document.getElementById("more"); | |
| var btnText = document.getElementById("myBtn"); | |
| if (dots.style.display === "none") { | |
| dots.style.display = "inline"; | |
| btnText.innerHTML = "Disclaimer"; | |
| moreText.style.display = "none"; | |
| } else { | |
| dots.style.display = "none"; | |
| btnText.innerHTML = "Close"; | |
| moreText.style.display = "inline"; | |
| } | |
| } | |
| </script> | |
| </body> | |
| </html> | |