Skip to content

Commit

Permalink
fix : app opencv
Browse files Browse the repository at this point in the history
  • Loading branch information
@NafMn
NafMn committed Jun 4, 2024
1 parent bdad5c6 commit 46262ec
Show file tree
Hide file tree
Showing 2 changed files with 68 additions and 33 deletions.
38 changes: 30 additions & 8 deletions app.py
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
from flask import Flask, render_template, request
from flask import Flask, render_template, request, Response
import cv2
import numpy as np
import pandas as pd
Expand All @@ -17,9 +17,35 @@
else:
raise KeyError("Column names 'Hiragana', 'Romaji', and 'Label' are required in hiragana_labels.csv")


app = Flask(__name__)

# Fungsi untuk mendapatkan frame dari kamera
def gen_frames():
cap = cv2.VideoCapture(0)
while True:
# Baca frame dari kamera
success, frame = cap.read()
if not success:
break
else:
# Lakukan prediksi pada frame yang didapat
predicted_label, predicted_romaji = predict_image_cv(model, frame, hiragana_labels)

# Tampilkan hasil prediksi pada layar
if predicted_label is not None and predicted_romaji is not None:
cv2.putText(frame, f'Prediksi: {predicted_label} ({predicted_romaji})', (10, 30), cv2.FONT_HERSHEY_SIMPLEX, 0.8, (0, 255, 0), 2)

ret, buffer = cv2.imencode('.jpg', frame)
frame = buffer.tobytes()
yield (b'--frame\r\n'
b'Content-Type: image/jpeg\r\n\r\n' + frame + b'\r\n')

# Endpoint untuk streaming video dari kamera
@app.route('/video_feed')
def video_feed():
return Response(gen_frames(), mimetype='multipart/x-mixed-replace; boundary=frame')

# Fungsi untuk memprediksi gambar menggunakan model
def predict_image_cv(model, image, label_map):
# Ubah gambar menjadi skala abu-abu
gray = cv2.cvtColor(image, cv2.COLOR_BGR2GRAY)
Expand Down Expand Up @@ -48,27 +74,23 @@ def predict_image_cv(model, image, label_map):

return predicted_label, predicted_romaji

# Endpoint untuk halaman utama
@app.route('/')
def index():
return render_template('index.html')

# Endpoint untuk prediksi gambar yang diunggah
@app.route('/predict', methods=['POST'])
def predict():
# Ambil file gambar dari form
image = request.files['image']
# Baca file gambar
img_np = np.frombuffer(image.read(), np.uint8)
# Baca gambar menggunakan OpenCV
frame = cv2.imdecode(img_np, cv2.IMREAD_COLOR)

# Lakukan prediksi pada frame yang didapat
predicted_label, predicted_romaji = predict_image_cv(model, frame, hiragana_labels)

# Tampilkan hasil prediksi pada layar
if predicted_label is not None and predicted_romaji is not None:
cv2.putText(frame, f'Prediksi: {predicted_label} ({predicted_romaji})', (10, 30), cv2.FONT_HERSHEY_SIMPLEX, 0.8, (0, 255, 0), 2)

# Konversi frame OpenCV ke format yang bisa ditampilkan di HTML
ret, buffer = cv2.imencode('.jpg', frame)
img_str = buffer.tobytes()

Expand Down
63 changes: 38 additions & 25 deletions templates/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,35 +4,48 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Prediksi Hiragana</title>
<style>
body {
font-family: Arial, sans-serif;
}
#container {
text-align: center;
margin-top: 50px;
}
#image-preview {
margin-bottom: 20px;
}
</style>
</head>
<body>
<div id="container">
<h1>Prediksi Hiragana</h1>
<form id="upload-form" method="post" enctype="multipart/form-data" action="/predict">
<input type="file" name="image" accept="image/*" required>
<button type="submit">Prediksi</button>
</form>
<div id="image-preview"></div>
<div id="prediction"></div>
<h1>Prediksi Hiragana</h1>

<!-- Form untuk mengunggah gambar -->
<form id="upload-form" method="post" enctype="multipart/form-data" action="/predict">
<input type="file" name="image" accept="image/*" required>
<button type="submit">Prediksi dari Gambar</button>
</form>

<!-- Tombol untuk memulai dan menghentikan streaming -->
<button id="startStream">Mulai Streaming</button>
<button id="stopStream">Hentikan Streaming</button>

<!-- Kontainer untuk menampilkan video -->
<div id="videoContainer">
<img id="videoFeed" width="640" height="480" style="display:none;">
</div>

<!-- Kontainer untuk menampilkan hasil prediksi -->
<div id="prediction"></div>

<script>
const form = document.getElementById('upload-form');
const imagePreview = document.getElementById('image-preview');
const startButton = document.getElementById('startStream');
const stopButton = document.getElementById('stopStream');
const video = document.getElementById('videoFeed');
const prediction = document.getElementById('prediction');

// Menambahkan event listener untuk tombol mulai streaming
startButton.addEventListener('click', async () => {
video.src = "{{ url_for('video_feed') }}"; // Mulai streaming video
video.style.display = 'block'; // Tampilkan video
});

// Menambahkan event listener untuk tombol hentikan streaming
stopButton.addEventListener('click', () => {
video.src = ''; // Hentikan streaming video
video.style.display = 'none'; // Sembunyikan video
});

// Memperbarui tampilan dengan hasil prediksi setelah mengunggah gambar
const form = document.getElementById('upload-form');
form.addEventListener('submit', async (e) => {
e.preventDefault();

Expand All @@ -46,11 +59,11 @@ <h1>Prediksi Hiragana</h1>
const imageUrl = URL.createObjectURL(blob);
const img = document.createElement('img');
img.src = imageUrl;
imagePreview.innerHTML = '';
imagePreview.appendChild(img);
prediction.innerHTML = ''; // Bersihkan hasil prediksi sebelumnya
prediction.appendChild(img); // Tampilkan gambar yang diunggah

const text = await response.text();
prediction.innerHTML = text;
prediction.innerHTML += text; // Tampilkan hasil prediksi
});
</script>
</body>
Expand Down

0 comments on commit 46262ec

Please sign in to comment.