File size: 4,661 Bytes
68eb98f 72d281f 68eb98f |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 |
<!DOCTYPE html>
<html>
<head>
<title>Text-to-SQL Explanations in TableQA</title>
<style>
body {
font-family: 'Roboto', sans-serif;
background: url('/api/placeholder/1920/1080') no-repeat center center fixed;
background-size: cover;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
margin: 0;
padding: 20px;
}
.container {
text-align: center;
background-color: #ffffff;
padding: 40px;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
width: 80%;
max-width: 1000px;
}
h1, h2 {
color: #333;
}
p, li {
font-size: 16px;
color: #333;
text-align: left;
}
.step {
background-color: #f9f9f9;
border: 1px solid #ddd;
border-radius: 5px;
margin-bottom: 20px;
padding: 15px;
}
.step-title {
font-weight: bold;
margin-bottom: 10px;
}
table {
width: 100%;
border-collapse: collapse;
margin-bottom: 20px;
}
th, td {
border: 1px solid #ddd;
padding: 8px;
text-align: left;
}
th {
background-color: #f2f2f2;
}
.highlighted-cell {
background-color: #ffffcc;
}
button {
background-color: #4CAF50;
color: white;
padding: 15px 30px;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 18px;
transition: background-color 0.3s ease;
margin-top: 20px;
}
button:hover {
background-color: #45a049;
}
iframe {
width: 100%;
height: 600px;
border: none;
margin-top: 20px;
}
.sql-command {
background-color: #f0f0f0;
padding: 10px;
border-left: 4px solid #4CAF50;
font-family: monospace;
white-space: pre-wrap;
text-align: left;
margin-bottom: 20px;
}
</style>
</head>
<body>
<div class="container">
<h1>Understanding Text-to-SQL Explanations</h1>
<p>
Text-to-SQL is a TableQA method that translates the natural language question into an SQL query. The SQL query itself serves as the explanation for how the system arrives at its answer.
</p>
<h2>Example: 1947 Kentucky Wildcats Football Team</h2>
<p>
Statement to verify: "The Wildcats kept the opposing team scoreless in 4 games."
</p>
<div class="step">
<div class="step-title">SQL Command Generation</div>
<p>The system generates an SQL command to verify the statement:</p>
<div class="sql-command">
SELECT CASE
WHEN COUNT(*) = 4 THEN 'TRUE'
ELSE 'FALSE'
END AS result
FROM table_sql
WHERE opponents = 0;
</div>
<p>This SQL command does the following:</p>
<ol>
<li>It counts the number of rows where the 'opponents' column is 0 (scoreless games).</li>
<li>If the count is exactly 4, it returns 'TRUE', otherwise 'FALSE'.</li>
</ol>
</div>
<!-- <div class="step">-->
<!-- <div class="step-title">Explanation</div>-->
<!-- <p>The SQL command serves as an explanation by showing:</p>-->
<!-- <ul>-->
<!-- <li>What data is being queried (the '1947_kentucky_wildcats_football_team' table)</li>-->
<!-- <li>What condition is being checked (opponents = 0)</li>-->
<!-- <li>How many instances should satisfy the condition (COUNT(*) = 4)</li>-->
<!-- <li>What the final output means (TRUE if the condition is met, FALSE otherwise)</li>-->
<!-- </ul>-->
<!-- </div>-->
<h2>Text-to-SQL Example</h2>
<iframe src="{{ url_for('send_examples', filename='htmls_Text2SQL/TP/test-0.html') }}"></iframe>
<p>
In this example, you can see how the SQL command directly addresses the statement by counting the number of games where the opposing team didn't score.
</p>
<button onclick="location.href='{{ url_for('experiment', session_id=session_id) }}'">Proceed to Experiment</button>
</div>
</body>
</html> |