HTMX generate images view

{% extends "base.html" %}
{% load static %}
{% block head_title %}Generate Images{% endblock %}
{% block content %}
<div class="container mx-auto p-4" x-data="imageGenerator()">

    <!-- Category Selection -->
    <div class="card bg-base-100 shadow-xl mb-4 overflow-hidden">
        <div class="card-body">
            <h1 class="text-2xl font-bold">Generate Images for {{ person_project.name }}</h1>
            <h2 class="card-title">Categories</h2>
            <div class="overflow-x-auto pb-2" style="scrollbar-width: thin;">
                <div class="inline-flex space-x-1">
                    {% for category in categories %}
                        <button
                            class="btn btn-sm shrink-0 w-24 h-auto min-h-[2.5rem] normal-case text-xs whitespace-normal"
                            :class="selectedCategory === '{{ category }}' ? 'btn-primary text-white' : 'btn-outline'"
                            @click="selectCategory('{{ category }}')"
                            hx-get="{% url 'sample_images' category.id person_project.id %}"
                            hx-trigger="click"
                            hx-target="#sampleImages"
                            hx-vals='{"category": "{{ category }}"}'
                        >
                            <span class="block text-center w-full">{{ category.name }}</span>
                        </button>
                    {% endfor %}
                </div>
            </div>
        </div>
    </div>

    <!-- Sample Images -->
    <div id="sampleImages" class="card bg-base-100 shadow-xl mb-4 overflow-hidden">
        <div class="card-body">
            <h2 class="card-title">Pick a category above to start</h2>
            <div class="overflow-x-auto whitespace-nowrap pb-2" style="scrollbar-width: thin;">
                <div class="inline-flex space-x-2">
                    <!-- populated by HTMX -->
                </div>
            </div>
        </div>
    </div>
    <!-- Main Section -->
    <div class="card bg-base-100 shadow-xl mb-4">
        <div class="card-body">
            <form hx-post="{% url 'generate_image' person_project.id %}"
                  hx-target="#generatedImage"
                  hx-swap="innerHTML"
                  hx-indicator="#loading-indicator"
                  hx-disabled-elt="find button">
                {% csrf_token %}
                <div class="form-control">
                    <label class="label cursor-pointer justify-start">
                        <input type="checkbox" name="upscale" class="checkbox checkbox-primary">
                        <span class="label-text ml-2">Generate in HD <small>(HD for print and higher resolution, non HD for faster generation)</small></span>
                    </label>
                </div>
                <div class="form-control">
                    <label class="label">
                        <span class="label-text">Image prompt</span>
                    </label>
                    <textarea
                        name="prompt"
                        placeholder="Describe the image you want to generate or select a sample image"
                        x-model="prompt"
                        class="textarea textarea-bordered w-full"
                        rows="3"
                        id="prompt-input"
                    ></textarea>
                </div>
                <div class="form-control mt-4">

                    <template x-if="customLora">
                        <div class="flex gap-2">
                            <div class="badge badge-primary badge-lg text-white" x-text="customLora"></div>
                            <input type="hidden" name="custom_lora" x-model="customLora">
                        </div>
                    </template>
                </div>
                <div class="flex items-center gap-4">
                    <button
                        type="submit"
                        class="btn btn-primary text-white mt-2"
                    >
                        <i data-lucide="wand-sparkles" class="w-6 h-6 mx-auto text-white"></i>
                        Generate
                    </button>

                    <!-- Inline loading indicator -->
                    <div id="loading-indicator" class="htmx-indicator flex items-center">
                        <img
                            src="{% static 'mainapp/squid_peach_logo_text_250.png' %}"
                            class="h-6 w-12 object-contain"
                            style="animation: pulse-and-rotate 2s infinite;"
                        >
                        <span class="ml-2 text-sm">Creating...<br>
                        <small>It should take less than 1 minute...</small></span>
                    </div>
                </div>
                <p class="text-sm text-gray-400 mt-2">Every generation is unique, even with the same prompt!</p>
            </form>

            <!-- Container for generated images -->
            <div id="generatedImage" class="w-full mt-4">
                <!-- Generated image will be displayed here -->
            </div>
            <div id="generatedImagesGallery" class="card bg-base-100 shadow-xl"
                 hx-post="{% url 'generated_images_gallery' person_project.id %}"
                 hx-trigger="load"
                 hx-indicator="#loading-gallery-indicator"
                 hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'>
                <!-- Gallery will be loaded via HTMX -->
            </div>
            <div id="loading-gallery-indicator" class="htmx-indicator">
                <div class="flex items-center justify-center p-4">
                    <span class="loading loading-spinner loading-lg text-primary"></span>
                    <span class="text-lg ml-4">Loading generated images...</span>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    function imageGenerator() {
        return {
            selectedCategory: '',
            prompt: '',
            customLora: '',
            selectCategory(category) {
                this.selectedCategory = category;
            },
            setPrompt(newPrompt, newCustomLora) {
                // Decode Unicode escape sequences
                this.prompt = JSON.parse('"' + newPrompt.replace(/\"/g, '\\"') + '"');
                this.customLora = newCustomLora || '';
            }
        }
    }
</script>
{% endblock %}