CME Prediction Markets MCP Server

{% extends "base.html" %} {% block title %}Claim Verification - CME MCP Server{% endblock %} {% block content %} <div class="row"> <div class="col-lg-8 mx-auto"> <div class="card"> <div class="card-header"> <h4 class="mb-0"> <i class="fas fa-search-check me-2"></i>Claim Verification </h4> <small class="text-muted">Verify natural language claims against CME prediction market data</small> </div> <div class="card-body"> <!-- Input Form --> <form id="claim-form"> <div class="mb-3"> <label for="claim-text" class="form-label">Enter your claim:</label> <textarea class="form-control" id="claim-text" rows="3" placeholder="e.g., 'Bitcoin reached $95,000 today' or 'The S&P 500 will close above 4000 this week'" required></textarea> <div class="form-text">Enter any natural language claim about market predictions or outcomes.</div> </div> <div class="mb-3"> <label for="context-time" class="form-label">Context Time (optional):</label> <input type="datetime-local" class="form-control" id="context-time"> <div class="form-text">Specify a time context for the claim verification.</div> </div> <button type="submit" class="btn btn-primary"> <i class="fas fa-search me-2"></i>Verify Claim </button> <button type="button" class="btn btn-secondary ms-2" onclick="clearForm()"> <i class="fas fa-times me-2"></i>Clear </button> </form> <!-- Results --> <div id="results" class="mt-4" style="display: none;"> <h5>Verification Results:</h5> <div id="results-content"></div> </div> </div> </div> </div> </div> <!-- Examples --> <div class="row mt-4"> <div class="col-12"> <div class="card"> <div class="card-header"> <h5 class="mb-0"> <i class="fas fa-lightbulb me-2"></i>Example Claims to Try </h5> </div> <div class="card-body"> <div class="row"> <div class="col-md-6"> <h6>Cryptocurrency Claims:</h6> <ul class="list-unstyled"> <li><a href="#" onclick="setExampleClaim('Bitcoin reached $95,000 today')"> <i class="fas fa-quote-left me-1"></i>Bitcoin reached $95,000 today </a></li> <li><a href="#" onclick="setExampleClaim('Ethereum price exceeded $4000 this week')"> <i class="fas fa-quote-left me-1"></i>Ethereum price exceeded $4000 this week </a></li> </ul> </div> <div class="col-md-6"> <h6>Market Predictions:</h6> <ul class="list-unstyled"> <li><a href="#" onclick="setExampleClaim('The S&P 500 will close above 4500')"> <i class="fas fa-quote-left me-1"></i>The S&P 500 will close above 4500 </a></li> <li><a href="#" onclick="setExampleClaim('Oil prices will reach $100 per barrel')"> <i class="fas fa-quote-left me-1"></i>Oil prices will reach $100 per barrel </a></li> </ul> </div> </div> </div> </div> </div> </div> {% endblock %} {% block scripts %} <script> $(document).ready(function() { $('#claim-form').on('submit', async function(e) { e.preventDefault(); const claimText = $('#claim-text').val().trim(); const contextTime = $('#context-time').val(); if (!claimText) { alert('Please enter a claim to verify.'); return; } const resultsDiv = document.getElementById('results-content'); showLoading(resultsDiv); $('#results').show(); try { // Prepare arguments const args = { claim_text: claimText }; if (contextTime) { args.context_time = new Date(contextTime).toISOString(); } // Call the MCP tool const response = await mcpClient.callTool('verify_claim', args); if (response.success) { displayVerificationResult(response.result); } else { showError(resultsDiv, response.error || 'Verification failed'); } } catch (error) { showError(resultsDiv, 'Network error: ' + error.message); } }); }); function displayVerificationResult(result) { const verdictColors = { 'TRUE': 'success', 'FALSE': 'danger', 'INCONCLUSIVE': 'warning', 'INSUFFICIENT_DATA': 'info' }; const verdictIcons = { 'TRUE': 'fas fa-check-circle', 'FALSE': 'fas fa-times-circle', 'INCONCLUSIVE': 'fas fa-question-circle', 'INSUFFICIENT_DATA': 'fas fa-info-circle' }; const color = verdictColors[result.verdict] || 'secondary'; const icon = verdictIcons[result.verdict] || 'fas fa-circle'; let html = ` <div class="card"> <div class="card-body"> <div class="row"> <div class="col-md-6"> <h6>Verdict:</h6> <span class="badge bg-${color} fs-6"> <i class="${icon} me-1"></i>${result.verdict} </span> </div> <div class="col-md-6"> <h6>Confidence:</h6> <div class="progress"> <div class="progress-bar bg-${color}" role="progressbar" style="width: ${result.confidence * 100}%" aria-valuenow="${result.confidence * 100}" aria-valuemin="0" aria-valuemax="100"> ${Math.round(result.confidence * 100)}% </div> </div> </div> </div> <hr> <h6>Analysis:</h6> <p class="text-muted">${result.reason}</p> `; if (result.parsing_errors && result.parsing_errors.length > 0) { html += ` <h6>Parsing Issues:</h6> <ul class="text-warning"> `; result.parsing_errors.forEach(error => { html += `<li>${error}</li>`; }); html += '</ul>'; } if (result.evidence) { html += ` <h6>Supporting Evidence:</h6> ${formatJSON(result.evidence)} `; } html += ` </div> </div> `; document.getElementById('results-content').innerHTML = html; } function setExampleClaim(claim) { $('#claim-text').val(claim); } function clearForm() { $('#claim-text').val(''); $('#context-time').val(''); $('#results').hide(); } </script> {% endblock %}