Thiết kế website giá rẻ

Question

I am coding a flash app with Django I added code to enable text to speech so that the flashcards both question and answer can be read out aloud I have installed pyttsx3 2.90. when pressing the button that is greyed out nothing happens on inspecting the network element I get get this error when pressing the text to speech button 22/:559
Error:
SyntaxError: Unexpected token ‘<‘, “<!DOCTYPE “… is not valid JSON
(anonymous) @ 22/:559
Promise.catch (async)
toggleTextToSpeech @ 22/:558
(anonymous) @ 22/:565

As I have said i have pyttsx3 installed i checked the code it seems to be ok. I also checked urls.py file

import os
import base64
import pyttsx3
from django.conf import settings
from django.http import JsonResponse
from django.shortcuts import get_object_or_404, redirect, render
from .models import Card, Deck, StudySet, StudentDeck
from .forms import CardFormSet, DeckForm
from django.views.generic.edit import CreateView
from django.contrib.auth import authenticate, login
from django.contrib.auth.forms import AuthenticationForm


from django.http import JsonResponse

def text_to_speech(request, deck_id, card_id):
    if request.method == 'POST':
        card = get_object_or_404(Card, id=card_id)
        engine = pyttsx3.init()

        # Generate audio data for the question
        question_audio_path = os.path.join(settings.MEDIA_ROOT, 'audio', f'question_{card_id}.mp3')
        engine.save_to_file(card.question, question_audio_path)
        engine.runAndWait()
        with open(question_audio_path, 'rb') as f:
            question_audio_base64 = base64.b64encode(f.read()).decode('utf-8')
        os.remove(question_audio_path)

        # Generate audio data for the answer
        answer_audio_path = os.path.join(settings.MEDIA_ROOT, 'audio', f'answer_{card_id}.mp3')
        engine.save_to_file(card.answer, answer_audio_path)
        engine.runAndWait()
        with open(answer_audio_path, 'rb') as f:
            answer_audio_base64 = base64.b64encode(f.read()).decode('utf-8')
        os.remove(answer_audio_path)

        return JsonResponse({
            'question_audio': question_audio_base64,
            'answer_audio': answer_audio_base64,
        })
    return JsonResponse({'error': 'Invalid request'}, status=400)


def home(request):
    if request.user.is_authenticated:
        return redirect('all_decks')
    else:
        if request.method == 'POST':
            form = AuthenticationForm(request, data=request.POST)
            if form.is_valid():
                user = authenticate(username=form.cleaned_data['username'], password=form.cleaned_data['password'])
                if user is not None:
                    login(request, user)
                    return redirect('home')
        else:
            form = AuthenticationForm()
        return render(request, 'login.html', {'form': form})


def show_all_cards(request):
    c_list = Card.objects.all()
    context = {'list_of_cards': c_list}
    return render(request, 'show_all_cards.html', context)


def delete_card(request, card_id):
    card_to_delete = Card.objects.get(id=card_id)
    card_to_delete.delete()
    return redirect('show_all_cards')


def show_all_decks(request):
    d_list = Deck.objects.all()
    context = {'list_of_decks': d_list}
    return render(request, 'all_decks.html', context)


def delete_deck(request, deck_id):
    deck_to_delete = Deck.objects.get(id=deck_id)
    deck_to_delete.delete()
    return redirect('all_decks')


class DeckCreate(CreateView):
    form_class = DeckForm
    model = Deck

    def form_valid(self, form):
        f = form.save(commit=False)
        f.creator = self.request.user
        f.save()
        return super().form_valid(form)


def generate_audio(text, output_path):
    engine = pyttsx3.init()
    engine.save_to_file(text, output_path)
    engine.runAndWait()


def create_cards(request, deck_id):
    deck = get_object_or_404(Deck, pk=deck_id)

    if request.method == 'POST':
        formset = CardFormSet(request.POST, instance=deck)
        if formset.is_valid():
            cards = formset.save(commit=False)
            for card in cards:
                card.deck = deck

                # Generate audio files for the question and answer
                question_audio_path = os.path.join(settings.MEDIA_ROOT, 'audio', f'question_{card.id}.mp3')
                answer_audio_path = os.path.join(settings.MEDIA_ROOT, 'audio', f'answer_{card.id}.mp3')

                generate_audio(card.question, question_audio_path)
                generate_audio(card.answer, answer_audio_path)

                card.question_audio = os.path.join('audio', f'question_{card.id}.mp3')
                card.answer_audio = os.path.join('audio', f'answer_{card.id}.mp3')

                card.save()

            return redirect('create_cards', deck_id=deck_id)

    else:
        formset = CardFormSet(instance=deck)

    return render(request, 'create_cards.html', {'formset': formset, 'deck': deck})


def show_deck(request, deck_id):
    deck = get_object_or_404(Deck, pk=deck_id)
    c_list = Card.objects.filter(deck=deck)
    context = {'list_of_cards': c_list, 'deck': deck}
    return render(request, 'show_deck.html', context)


def rehearse_deck(request, deck_id):
    deck = get_object_or_404(Deck, pk=deck_id)
    c_list = Card.objects.filter(deck=deck)
    context = {
        'list_of_cards': c_list,
        'deck': deck,  # Include the 'deck' object in the context
        'audio_enabled': request.GET.get('audio_enabled', False)
    }
    return render(request, 'rehearse_deck.html', context)


def save_for_study(request, deck_id):
    user = request.user
    deck = get_object_or_404(Deck, pk=deck_id)
    studyset, created = StudySet.objects.get_or_create(student=user)
    if not StudentDeck.objects.filter(deck=deck, student=user).exists():
        s = StudentDeck()
        s.studyset = studyset
        s.student = user
        s.deck = deck
        s.save()
    return redirect('show_my_studyset')


def show_my_studyset(request):
    studyset = StudySet.objects.get(student_id=request.user.id)
    deck_list = StudentDeck.objects.filter(studyset_id=studyset.id)
    context = {'studyset': studyset, 'deck_list': deck_list}
    return render(request, 'my_studyset.html', context)


def remove_from_studyset(request, studentdeck_id):
    deck_to_remove = get_object_or_404(StudentDeck, id=studentdeck_id)
    deck_to_remove.delete()
    return redirect('show_my_studyset')


def leitner(request, deck_id):
    deck = get_object_or_404(Deck, pk=deck_id)
    c_list = Card.objects.filter(deck=deck)
    context = {'list_of_cards': c_list}
    return render(request, 'leitner_deck.html', context)

{% extends "base.html" %}
{% load static %}

{% block content %}
<div class="container">
    <div class="row">
        {% for card in list_of_cards %}
        <div class="rehearse_card" id="card-{{ card.id }}">
            <div class="card text-center" style="width: 30rem;">
                <img src="{% static 'images/FlashCardImage.svg' %}" class="card-img-top" alt="...">
                <div class="card-body">
                    <div class="card-front">
                        <h4 class="card-title-question">Q: {{ card.question }}</h4>
                        <button class="btn btn-primary btn-sm" onclick="flipCard('{{ card.id }}')">Flip Card</button>
                        <button class="btn btn-secondary btn-sm tts-button" data-card-id="{{ card.id }}"
                            data-question-audio="{{ card.question_audio.url }}">Text to Speech (Question)</button>
                    </div>
                    <div class="card-back" style="display: none;">
                        <h5 class="card-text-answer">A: {{ card.answer }}</h5>
                        <button class="btn btn-secondary btn-sm tts-button" data-card-id="{{ card.id }}"
                            data-answer-audio="{{ card.answer_audio.url }}">Text to Speech (Answer)</button>
                    </div>
                </div>
                <div class="card-footer">
                    <small class="text-muted">{{ card.id }} {{ card.deck.title }} · {{ card.deck.subject }}</small>
                </div>
            </div>
        </div>
        {% endfor %}
    </div>
    </div>
    </div>
</div>

<script>
    function flipCard(cardId) {
        const cardFront = document.querySelector(`#card-${cardId} .card-front`);
        const cardBack = document.querySelector(`#card-${cardId} .card-back`);

        if (cardFront && cardBack) {
            cardFront.style.display = cardFront.style.display === 'none' ? 'block' : 'none';
            cardBack.style.display = cardBack.style.display === 'none' ? 'block' : 'none';
        } else {
            console.error('Card elements not found.');
        }
    }

    function toggleTextToSpeech(button) {
        const cardId = button.dataset.cardId;
        const deckId = window.location.pathname.split('/')[3]; // Assuming the deck_id is the 4th part of the URL path
        const questionAudioUrl = button.dataset.questionAudio;
        const answerAudioUrl = button.dataset.answerAudio;

        const url = `/deck/rehearse/${deckId}/text-to-speech/${cardId}/`;

        fetch(url, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRFToken': '{{ csrf_token }}',
            },
            body: JSON.stringify({}),
        })
        .then(response => response.json())
        .then(data => {
            const questionAudio = new Audio(`data:audio/mpeg;base64,${data.question_audio}`);
            const answerAudio = new Audio(`data:audio/mpeg;base64,${data.answer_audio}`);

            questionAudio.play();
            questionAudio.addEventListener('ended', () => {
                answerAudio.play();
            });
        })
        .catch(error => {
            console.error('Error:', error);
        });
    }

    const ttsButtons = document.querySelectorAll('.tts-button');
    ttsButtons.forEach(button => {
        button.addEventListener('click', () => toggleTextToSpeech(button));
    });
</script>
{% endblock %}

Thiết kế website giá rẻ

Danh mục

syntax unexpected token Doctype is not valid json