app.js

new Vue({
    el: '#app',
    data: {
        prompt: '',
        selectedStyle: 'realistic',
        selectedSize: 'medium',
        generatedImage: null,
        isGenerating: false,
        maxChars: 500
    },
    computed: {
        remainingChars() {
            return this.maxChars - this.prompt.length;
        }
    },
    methods: {
        updateCharCount() {
            if (this.prompt.length > this.maxChars) {
                this.prompt = this.prompt.substring(0, this.maxChars);
            }
        },
        generateImage() {
            // Simulate image generation (in a real application, this would call an AI API)
            this.isGenerating = true;
            setTimeout(() => {
                // For demo purposes, we're using a placeholder image
                this.generatedImage = 'https://via.placeholder.com/512x512.png?text=AI+Generated+Image';
                this.isGenerating = false;
            }, 2000);
        },
        downloadImage() {
            if (this.generatedImage) {
                const link = document.createElement('a');
                link.href = this.generatedImage;
                link.download = 'ai-generated-image.png';
                document.body.appendChild(link);
                link.click();
                document.body.removeChild(link);
            }
        },
        shareImage() {
            if (this.generatedImage) {
                // Check if the Web Share API is available
                if (navigator.share) {
                    navigator.share({
                        title: 'AI Generated Image',
                        text: 'Check out this AI-generated image!',
                        url: window.location.href
                    }).catch(console.error);
                } else {
                    // Fallback: Copy the URL to clipboard
                    const dummy = document.createElement('input');
                    document.body.appendChild(dummy);
                    dummy.value = window.location.href;
                    dummy.select();
                    document.execCommand('copy');
                    document.body.removeChild(dummy);
                    alert('URL copied to clipboard!');
                }
            }
        }
    }
});