Handylabel / Web_app /templates /edit_csv.html
Imsachinsingh00's picture
Reinitializing project for new Hugging Face Space
d172d27
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSV File Editor</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<style>
.container {
margin-top: 20px;
}
.btn {
margin-top: 20px;
}
.form-control {
width: 100%;
}
.data-section {
margin-top: 40px;
}
.table-container {
overflow-x: auto;
}
.table-wrapper {
display: flex;
justify-content: space-between;
gap: 20px;
}
.table-wrapper table {
width: 100%;
}
</style>
</head>
<body>
<div class="container">
<h2 class="mb-4">Upload, View, and Edit CSV File</h2>
<!-- CSV Upload Section -->
<form method="POST" action="/upload_csv" enctype="multipart/form-data">
<div class="form-group">
<label for="csvFile">Upload CSV File:</label>
<input type="file" name="csv_file" id="csvFile" class="form-control-file" accept=".csv" required>
<button type="submit" class="btn btn-primary">Upload CSV</button>
</form>
<!-- Instruction Section -->
<form method="POST" action="/edit_csv">
<!-- Buttons for Speech Recording -->
<div class="mt-4">
<button type="button" id="recordButton" class="btn btn-danger">🎤 Record</button>
<button type="button" id="stopButton" class="btn btn-secondary" disabled>⏹ Stop</button>
</div>
<div class="form-group mt-4">
<label for="transcription">Instruction:</label>
<textarea name="transcription" id="transcription" class="form-control" rows="3" placeholder="Provide instructions for CSV manipulation..."></textarea>
</div>
<button type="submit" class="btn btn-success">Process Instruction</button>
</form>
<!-- Original and Updated Data Section -->
<div class="data-section">
<h3>Data Comparison</h3>
<div class="table-wrapper">
<!-- Original Data -->
{% if original_data %}
<div>
<h4>Original Data</h4>
<div class="table-container">
<table class="table table-bordered">
<thead>
<tr>
{% for column in columns %}
<th>{{ column }}</th>
{% endfor %}
</tr>
</thead>
<tbody>
{% for row in original_data %}
<tr>
{% for column in columns %}
<td>{{ row[column] }}</td>
{% endfor %}
</tr>
{% endfor %}
</tbody>
</table>
</div>
</div>
{% endif %}
<!-- Updated Data -->
{% if updated_data %}
<div>
<h4>Updated Data</h4>
<div class="table-container">
<table class="table table-bordered">
<thead>
<tr>
{% for column in columns %}
<th>{{ column }}</th>
{% endfor %}
</tr>
</thead>
<tbody>
{% for row in updated_data %}
<tr>
{% for column in columns %}
<td>{{ row[column] }}</td>
{% endfor %}
</tr>
{% endfor %}
</tbody>
</table>
</div>
</div>
{% endif %}
</div>
</div>
</div>
<script>
let mediaRecorder;
let audioChunks = [];
document.getElementById('recordButton').addEventListener('click', function () {
navigator.mediaDevices.getUserMedia({ audio: true })
.then(stream => {
mediaRecorder = new MediaRecorder(stream);
mediaRecorder.start();
audioChunks = [];
mediaRecorder.ondataavailable = event => {
audioChunks.push(event.data);
};
mediaRecorder.onstart = () => {
document.getElementById('recordButton').disabled = true;
document.getElementById('stopButton').disabled = false;
};
mediaRecorder.onstop = () => {
document.getElementById('recordButton').disabled = false;
document.getElementById('stopButton').disabled = true;
const audioBlob = new Blob(audioChunks, { type: 'audio/wav' });
const formData = new FormData();
formData.append('audio', audioBlob, 'recording.wav');
// Send the audio blob to the backend for transcription
fetch('/process_audio', {
method: 'POST',
body: formData
})
.then(response => response.json())
.then(data => {
document.getElementById('transcription').value = data.transcription;
})
.catch(error => {
console.error('Error:', error);
});
};
})
.catch(error => {
console.error('Error accessing microphone:', error);
});
});
document.getElementById('stopButton').addEventListener('click', function () {
mediaRecorder.stop();
});
</script>
</body>
</html>