Update src/App.jsx

src/App.jsx

@@ -27,21 +27,21 @@ const QRGeneratorTab = ({
     isSuggestingIdeas, suggestIdeas, downloadQrCode, qrCanvasRef,
     isInputFocused, setIsInputFocused, currentThemeClasses,
     qrStyles, selectedStyleIndex, setSelectedStyleIndex, styleCanvasRefs, drawQrCode,
-    suggestedIdeaList, showSuggestedIdeas, setShowSuggestedIdeas,
-    downloadFormat, setDownloadFormat, qrResolution, setQrResolution
+    suggestedIdeas, showSuggestedIdeas, setShowSuggestedIdeas,
+    downloadResolution, setDownloadResolution // New prop for download resolution
 }) => {
     // Effect to generate QR code on the main canvas (Generator Tab)
     useEffect(() => {
-        // Use a higher resolution for the preview canvas for better quality
-        drawQrCode(qrCanvasRef.current, content, qrColor, errorLevel, 512, '#000000');
+        // Preview canvas is always 256x256
+        drawQrCode(qrCanvasRef.current, content, qrColor, errorLevel, 256);
     }, [content, qrColor, errorLevel, drawQrCode, qrCanvasRef]);
 
     // Effect to generate QR codes for style previews (Style Selection Panel)
     useEffect(() => {
         qrStyles.forEach((style, index) => {
             const canvas = styleCanvasRefs.current[index];
-            // Use black background for style previews as well
-            drawQrCode(canvas, "Sample", style.fg, 'H', 80, '#000000');
+            // Use a generic sample for style previews, not actual content
+            drawQrCode(canvas, "Sample", style.fg, 'H', 80);
         });
     }, [qrStyles, drawQrCode, styleCanvasRefs]);
 
@@ -78,7 +78,7 @@ const QRGeneratorTab = ({
                         ) : (
                             <i className="fas fa-lightbulb mr-2"></i>
                         )}
-                        💡 {isSuggestingIdeas ? 'Loading Ideas...' : 'Suggest Ideas'}
+                        💡 {isSuggestingIdeas ? 'Suggesting Idea...' : 'Suggest Idea'}
                     </button>
                     <button
                         className={`w-full sm:w-1/2 py-3 px-6 rounded-xl font-bold text-lg bg-gradient-to-r ${currentThemeClasses.secondaryAccent} text-white shadow-lg ${currentThemeClasses.buttonGlow} transform hover:-translate-y-1 transition-all duration-300 ease-in-out flex items-center justify-center`}
@@ -88,35 +88,19 @@ const QRGeneratorTab = ({
                     </button>
                 </div>
 
-                {/* Display suggested ideas as clickable buttons */}
-                {suggestedIdeaList.length > 0 && (
+                {/* Suggested Ideas Panel */}
+                {showSuggestedIdeas && suggestedIdeas && (
                     <div className={`mt-4 p-4 rounded-xl border ${currentThemeClasses.glassBorder} ${currentThemeClasses.glassBg} shadow-inner transition-all duration-300 overflow-hidden`}>
                         <div className="flex justify-between items-center cursor-pointer" onClick={() => setShowSuggestedIdeas(!showSuggestedIdeas)}>
-                            <label className={`font-semibold ${currentThemeClasses.labelColor} font-inter`}>Suggested QR Ideas:</label>
+                            <label className={`font-semibold ${currentThemeClasses.labelColor} font-inter`}>Suggested QR Idea:</label>
                             <i className={`fas ${showSuggestedIdeas ? 'fa-chevron-up' : 'fa-chevron-down'} transition-transform duration-300`}></i>
                         </div>
                         <div className={`overflow-hidden transition-all duration-500 ease-in-out ${showSuggestedIdeas ? 'max-h-96 opacity-100 mt-2' : 'max-h-0 opacity-0'}`}>
-                            <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-2 mt-2">
-                                {suggestedIdeaList.map((idea, index) => (
-                                    <button
-                                        key={index}
-                                        className={`flex items-center p-2 rounded-lg text-sm transition-all duration-200 ease-in-out
-                                            ${currentThemeClasses.inputBg} ${currentThemeClasses.text} hover:bg-blue-500/20 hover:scale-[1.02]`}
-                                        onClick={() => {
-                                            setContent(idea.text);
-                                            setShowSuggestedIdeas(false); // Hide suggestions after selection
-                                        }}
-                                    >
-                                        <span className="mr-2">{idea.emoji}</span>
-                                        {idea.text}
-                                    </button>
-                                ))}
-                            </div>
+                            <p className={`${currentThemeClasses.text} whitespace-pre-wrap text-sm font-inter`}>{suggestedIdeas}</p>
                         </div>
                     </div>
                 )}
 
-
                 <label className={`mt-4 mb-2 font-semibold ${currentThemeClasses.labelColor} font-inter`}>Error Correction Level:</label>
                 <select
                     className={`w-full p-3 rounded-xl border ${currentThemeClasses.inputBorder} ${currentThemeClasses.inputBg} ${currentThemeClasses.text} focus:outline-none focus:ring-2 focus:ring-blue-500 appearance-none transition-all duration-300 font-inter`}
@@ -137,41 +121,24 @@ const QRGeneratorTab = ({
                     onChange={(e) => setQrColor(e.target.value)}
                 />
 
-                {/* New: Download Format and Resolution Selection */}
-                <div className="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4 mt-4">
-                    <div className="w-full sm:w-1/2">
-                        <label className={`mb-2 font-semibold ${currentThemeClasses.labelColor} font-inter block`}>Download Format:</label>
-                        <select
-                            className={`w-full p-3 rounded-xl border ${currentThemeClasses.inputBorder} ${currentThemeClasses.inputBg} ${currentThemeClasses.text} focus:outline-none focus:ring-2 focus:ring-blue-500 appearance-none transition-all duration-300 font-inter`}
-                            value={downloadFormat}
-                            onChange={(e) => setDownloadFormat(e.target.value)}
-                        >
-                            <option value="png">PNG (High Resolution)</option>
-                            <option value="svg">SVG (Vector)</option>
-                        </select>
-                    </div>
-                    {downloadFormat === 'png' && (
-                        <div className="w-full sm:w-1/2">
-                            <label className={`mb-2 font-semibold ${currentThemeClasses.labelColor} font-inter block`}>PNG Resolution:</label>
-                            <select
-                                className={`w-full p-3 rounded-xl border ${currentThemeClasses.inputBorder} ${currentThemeClasses.inputBg} ${currentThemeClasses.text} focus:outline-none focus:ring-2 focus:ring-blue-500 appearance-none transition-all duration-300 font-inter`}
-                                value={qrResolution}
-                                onChange={(e) => setQrResolution(parseInt(e.target.value))}
-                            >
-                                <option value={1024}>1024x1024</option>
-                                <option value={2048}>2048x2048</option>
-                                <option value={4096}>4096x4096</option>
-                            </select>
-                        </div>
-                    )}
-                </div>
-
+                {/* New: Download Resolution Selector */}
+                <label className={`mt-4 mb-2 font-semibold ${currentThemeClasses.labelColor} font-inter`}>Download Resolution:</label>
+                <select
+                    className={`w-full p-3 rounded-xl border ${currentThemeClasses.inputBorder} ${currentThemeClasses.inputBg} ${currentThemeClasses.text} focus:outline-none focus:ring-2 focus:ring-blue-500 appearance-none transition-all duration-300 font-inter`}
+                    value={downloadResolution}
+                    onChange={(e) => setDownloadResolution(Number(e.target.value))}
+                >
+                    <option value={256}>256x256 (Preview Size)</option>
+                    <option value={512}>512x512 (Medium)</option>
+                    <option value={1024}>1024x1024 (High)</option>
+                    <option value={2048}>2048x2048 (Very High)</option>
+                </select>
 
                 <label className={`mt-6 mb-2 font-semibold ${currentThemeClasses.labelColor} font-inter`}>QR Preview:</label>
                 <div
                     className={`relative flex justify-center items-center w-full min-h-[300px] rounded-2xl border-2 ${currentThemeClasses.qrPreviewBorder} ${currentThemeClasses.qrPreviewBg} p-4 shadow-inner overflow-hidden transform transition-all duration-300 hover:scale-[1.01] hover:-translate-y-1 ${currentThemeClasses.glow}`}
                 >
-                    <canvas ref={qrCanvasRef} width="512" height="512" className={`rounded-lg shadow-xl ${content ? '' : 'hidden'}`}></canvas>
+                    <canvas ref={qrCanvasRef} width="256" height="256" className={`rounded-lg shadow-xl ${content ? '' : 'hidden'}`}></canvas>
                     {!content && (
                         <p className={`${currentThemeClasses.labelColor} text-lg font-inter absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2`}>Enter content to see QR preview</p>
                     )}
@@ -209,7 +176,7 @@ const QRGeneratorTab = ({
 // --- QRDecoderTab Component ---
 const QRDecoderTab = ({
     decodedContent, setDecodedContent,
-    isSummarizing, summarizeXml, showAlert, decodeQrCode,
+    isSummarizing, summarizeContent, showAlert, decodeQrCode,
     currentThemeClasses
 }) => {
     return (
@@ -245,7 +212,7 @@ const QRDecoderTab = ({
 
                 <button
                     className={`mt-4 w-full py-3 px-6 rounded-xl font-bold text-lg bg-gradient-to-r ${currentThemeClasses.secondaryAccent} text-white shadow-lg ${currentThemeClasses.buttonGlow} transform hover:-translate-y-1 transition-all duration-300 ease-in-out flex items-center justify-center`}
-                    onClick={summarizeXml}
+                    onClick={summarizeContent}
                     disabled={isSummarizing || !decodedContent.trim() || decodedContent === 'No QR code detected.'}
                 >
                     {isSummarizing ? (
@@ -253,7 +220,7 @@ const QRDecoderTab = ({
                     ) : (
                         <i className="fas fa-file-alt mr-2"></i>
                     )}
-                    📝 {isSummarizing ? 'Summarizing XML...' : 'Summarize XML'}
+                    📝 {isSummarizing ? 'Summarizing Content...' : 'Summarize Content'}
                 </button>
             </div>
         </div>
@@ -295,55 +262,38 @@ const App = () => {
     const [activeTab, setActiveTab] = useState('generator');
     const [content, setContent] = useState('');
     const [errorLevel, setErrorLevel] = useState('L');
-    const [qrColor, setQrColor] = useState('#00FFCC'); // Default to a vibrant neon cyan
+    const [qrColor, setQrColor] = useState('#000000');
     const [decodedContent, setDecodedContent] = useState('');
     const [selectedStyleIndex, setSelectedStyleIndex] = useState(0);
-    const [currentTheme, setCurrentTheme] = useState('dark'); // Initial state, will be updated by useEffect
+    const [currentTheme, setCurrentTheme] = useState('dark');
     const [isSummarizing, setIsSummarizing] = useState(false);
-    const [allAvailableIdeas, setAllAvailableIdeas] = useState([]); // Stores all ideas from the text file
-    const [suggestedIdeaList, setSuggestedIdeaList] = useState([]); // Stores the randomly selected subset
+    const [suggestedIdeas, setSuggestedIdeas] = useState('');
     const [isSuggestingIdeas, setIsSuggestingIdeas] = useState(false);
     const [showSuggestedIdeas, setShowSuggestedIdeas] = useState(false);
     const [alertMessage, setAlertMessage] = useState(null);
     const [isInputFocused, setIsInputFocused] = useState(false);
-    const [downloadFormat, setDownloadFormat] = useState('png'); // Default download format
-    const [qrResolution, setQrResolution] = useState(2048); // Default high resolution for PNG
+    const [downloadResolution, setDownloadResolution] = useState(512); // New state for download resolution
 
     const qrCanvasRef = useRef(null);
-    // styleCanvasRefs is for the QR style previews, not dependent on the number of suggested ideas
-    const styleCanvasRefs = useRef(Array(12).fill(null)); 
-
-    // Detect user's preferred color scheme and set initial theme
-    useEffect(() => {
-        const prefersDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches;
-        setCurrentTheme(prefersDarkMode ? 'dark' : 'light');
-
-        // Listen for changes in the user's preferred color scheme
-        const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
-        const handleChange = (e) => {
-            setCurrentTheme(e.matches ? 'dark' : 'light');
-        };
-        mediaQuery.addEventListener('change', handleChange);
-        return () => mediaQuery.removeEventListener('change', handleChange);
-    }, []);
+    const styleCanvasRefs = useRef(Array(12).fill(null));
 
-    // Define QR code styles (updated with more neon colors)
+    // Define QR code styles (remains in App as it's static data used by QRGeneratorTab)
     const qrStyles = [
-        { name: "Neon Cyan", fg: "#00FFCC" },
-        { name: "Neon Green", fg: "#00FF00" },
-        { name: "Neon Magenta", fg: "#FF00FF" },
-        { name: "Electric Blue", fg: "#00BFFF" },
-        { name: "Laser Red", fg: "#FF3333" },
-        { name: "Vivid Yellow", fg: "#FFFF00" },
-        { name: "Deep Purple", fg: "#8A2BE2" },
-        { name: "Aqua", fg: "#00FFFF" },
-        { name: "Lime", fg: "#32CD32" },
-        { name: "Fuchsia", fg: "#FF00FF" },
-        { name: "Orange Glow", fg: "#FFA500" },
-        { name: "White Glow", fg: "#FFFFFF" }, // A white glow on black background
+        { name: "Classic", fg: "#000000" },
+        { name: "Blue", fg: "#0033CC" },
+        { name: "Red", fg: "#CC3300" },
+        { name: "Green", fg: "#006600" },
+        { name: "Pink", fg: "#FF0099" },
+        { name: "Teal", fg: "#008080" },
+        { name: "Indigo", fg: "#4B0082" },
+        { name: "Orange", fg: "#FF6600" },
+        { name: "Gray", "fg": "#333333" },
+        { name: "Crimson", "fg": "#DC143C" },
+        { name: "Gold", "fg": "#FFD700" },
+        { name: "Turquoise", "fg": "#40E0D0" },
     ];
 
-    // Define themes
+    // Define themes (remains in App)
     const themes = {
         dark: {
             bg: 'bg-gradient-to-br from-[#0A0A0A] via-[#1A0A2A] to-[#0A0A0A] animate-gradient-shift',
@@ -509,7 +459,7 @@ const App = () => {
     };
 
     // Callback to generate QR code on a given canvas
-    const drawQrCode = useCallback((canvas, text, color, errorLevel, size = 256, bg = '#FFFFFF') => {
+    const drawQrCode = useCallback((canvas, text, color, errorLevel, size = 256) => {
         if (!canvas) {
             console.warn("Canvas element is null, cannot draw QR code.");
             return;
@@ -532,8 +482,8 @@ const App = () => {
                 errorCorrectionLevel: errorLevel,
                 width: size,
                 color: {
-                    dark: color, // QR code dots color
-                    light: bg    // QR code background color
+                    dark: color,
+                    light: '#FFFFFF'
                 }
             }, function (error) {
                 if (error) console.error("QR Code drawing error:", error);
@@ -541,69 +491,31 @@ const App = () => {
         }
     }, []);
 
-    // Function to download the generated QR code (now supports PNG and SVG)
-    const downloadQrCode = async () => {
+    // Function to download the generated QR code
+    const downloadQrCode = () => {
         if (content.trim() === '') {
             showAlert('Please enter content to generate QR code.');
             return;
         }
 
-        if (downloadFormat === 'png') {
-            const canvas = document.createElement('canvas'); // Create an off-screen canvas for high-res
-            await new Promise(resolve => {
-                QRCode.toCanvas(canvas, content, {
-                    errorCorrectionLevel: errorLevel,
-                    width: qrResolution, // Use selected resolution
-                    color: {
-                        dark: qrColor,
-                        light: '#000000' // Black background for downloaded PNG
-                    }
-                }, function (error) {
-                    if (error) {
-                        console.error("QR Code PNG drawing error:", error);
-                        showAlert("Failed to generate high-resolution PNG. Try again.");
-                    }
-                    resolve();
-                });
-            });
+        // Create a temporary canvas for high-resolution download
+        const tempCanvas = document.createElement('canvas');
+        tempCanvas.width = downloadResolution;
+        tempCanvas.height = downloadResolution;
 
-            const pngUrl = canvas.toDataURL("image/png");
-            const downloadLink = document.createElement('a');
-            downloadLink.href = pngUrl;
-            downloadLink.download = `qrcode_${qrResolution}px.png`;
-            document.body.appendChild(downloadLink);
-            downloadLink.click();
-            document.body.removeChild(downloadLink);
-            showAlert(`QR Code downloaded as PNG (${qrResolution}x${qrResolution}px)!`);
-
-        } else if (downloadFormat === 'svg') {
-            try {
-                const svgString = await QRCode.toString(content, {
-                    errorCorrectionLevel: errorLevel,
-                    type: 'svg',
-                    width: qrResolution, // Reusing qrResolution for SVG viewBox consistency
-                    color: {
-                        dark: qrColor,
-                        light: '#000000' // Black background for SVG
-                    }
-                });
-
-                const blob = new Blob([svgString], { type: 'image/svg+xml' });
-                const url = URL.createObjectURL(blob);
-                const downloadLink = document.createElement('a');
-                downloadLink.href = url;
-                downloadLink.download = `qrcode.svg`;
-                document.body.appendChild(downloadLink);
-                downloadLink.click();
-                document.body.removeChild(downloadLink);
-                URL.revokeObjectURL(url); // Clean up the URL object
-                showAlert('QR Code downloaded as SVG!');
-
-            } catch (error) {
-                console.error("QR Code SVG generation error:", error);
-                showAlert("Failed to generate SVG. Please try again.");
-            }
-        }
+        // Draw the QR code onto the temporary canvas at the selected resolution
+        drawQrCode(tempCanvas, content, qrColor, errorLevel, downloadResolution);
+
+        // Get the data URL from the temporary canvas
+        const pngUrl = tempCanvas.toDataURL("image/png");
+        const downloadLink = document.createElement('a');
+        downloadLink.href = pngUrl;
+        downloadLink.download = `qrcode_${downloadResolution}x${downloadResolution}.png`;
+        document.body.appendChild(downloadLink);
+        downloadLink.click();
+        document.body.removeChild(downloadLink);
+
+        showAlert(`QR Code saved as ${downloadResolution}x${downloadResolution} PNG!`);
     };
 
     // Function to decode QR code from an uploaded image
@@ -626,8 +538,8 @@ const App = () => {
                 if (jsQR) {
                     let code = jsQR(imageData.data, imageData.width, imageData.height);
 
-                    // Attempt inversion if initial scan fails
                     if (!code) {
+                        // Attempt to invert colors and try again
                         for (let i = 0; i < imageData.data.length; i += 4) {
                             imageData.data[i] = 255 - imageData.data[i];
                             imageData.data[i + 1] = 255 - imageData.data[i + 1];
@@ -638,16 +550,16 @@ const App = () => {
 
                     if (code) {
                         setDecodedContent(code.data);
-                        setSuggestedIdeaList([]); // Clear previous suggestions when new QR is decoded
+                        setSuggestedIdeas(''); // Clear previous suggestions when new QR is decoded
                         setShowSuggestedIdeas(false);
                     } else {
                         setDecodedContent('No QR code detected.');
-                        setSuggestedIdeaList([]);
+                        setSuggestedIdeas('');
                         setShowSuggestedIdeas(false);
                     }
                 } else {
                     showAlert('QR decoder library (jsQR) not loaded. Please try again or check internet connection.');
-                    setSuggestedIdeaList([]);
+                    setSuggestedIdeas('');
                     setShowSuggestedIdeas(false);
                 }
             };
@@ -656,8 +568,8 @@ const App = () => {
         reader.readAsDataURL(file);
     };
 
-    // Function to summarize XML content using Gemini API
-    const summarizeXml = async () => {
+    // Function to summarize content using Gemini API
+    const summarizeContent = async () => {
         if (!decodedContent.trim() || decodedContent === 'No QR code detected.') {
             showAlert('Please decode a QR code first to summarize its content.');
             return;
@@ -666,94 +578,72 @@ const App = () => {
         setIsSummarizing(true);
         try {
             let chatHistory = [];
-            // Updated prompt to specifically convert XML to plain text
-            const prompt = `Convert the following XML content into concise, human-readable plain text. Extract key information and present it clearly. If the content is not XML, summarize it as plain text. XML/Text to process: "${decodedContent}"`;
+            // Prompt to handle various content types for summarization
+            const prompt = `Summarize the following text concisely. If the text appears to be in XML, JSON, or another large structured format, extract the key information and present it as plain text. If it's a very long plain text, provide a brief summary. Text to summarize: "${decodedContent}"`;
             chatHistory.push({ role: "user", parts: [{ text: prompt }] });
             const payload = { contents: chatHistory };
             const apiKey = ""; // Canvas will provide this at runtime
             const apiUrl = `https://generativelanguage.googleapis.com/v1beta/models/gemini-2.0-flash:generateContent?key=${apiKey}`;
 
-            console.log("Attempting to summarize XML content...");
             const response = await fetch(apiUrl, {
                 method: 'POST',
                 headers: { 'Content-Type': 'application/json' },
                 body: JSON.stringify(payload)
             });
 
-            console.log("Summarize XML API Response Status:", response.status, response.statusText);
-            if (!response.ok) {
-                const errorData = await response.text();
-                console.error("Summarize XML API Error Response:", errorData);
-                showAlert(`Failed to summarize XML: ${response.statusText}. Please try again.`);
-                return;
-            }
-
             const result = await response.json();
-            console.log("Summarize XML API Result:", result);
 
             if (result.candidates && result.candidates.length > 0 &&
                 result.candidates[0].content && result.candidates[0].content.parts &&
                 result.candidates[0].content.parts.length > 0) {
                 const text = result.candidates[0].content.parts[0].text;
                 setContent(text); // Update the generator's input field with summarized content
-                showAlert('Content summarized (XML converted) and moved to QR Generator tab!');
+                showAlert('Content summarized and moved to QR Generator tab!');
             } else {
-                console.error("Gemini API response structure unexpected for summarizeXml:", result);
-                showAlert("Failed to summarize XML. Unexpected API response. Please try again.");
+                showAlert("Failed to summarize content. Please try again.");
             }
         } catch (error) {
-            console.error("Error summarizing XML content:", error);
-            showAlert("An error occurred while summarizing XML content. Please check your network connection.");
+            console.error("Error summarizing content:", error);
+            showAlert("An error occurred while summarizing content.");
         } finally {
             setIsSummarizing(false);
         }
     };
 
-    // Function to fetch and set random suggested ideas from a text file
+    // Function to suggest ideas for QR code generation from suggestedIdeas.txt
     const suggestIdeas = async () => {
         setIsSuggestingIdeas(true);
-        setSuggestedIdeaList([]); // Clear previous ideas
-        setShowSuggestedIdeas(true); // Show the ideas panel
+        setSuggestedIdeas('Fetching ideas...');
+        setShowSuggestedIdeas(true); // Always show the ideas panel when fetching
 
         try {
-            if (allAvailableIdeas.length === 0) {
-                console.log("Fetching suggestedIdeas.txt...");
-                const response = await fetch('/suggestedIdeas.txt'); // Path to the text file
-                if (!response.ok) {
-                    throw new Error(`HTTP error! status: ${response.status}`);
-                }
-                const text = await response.text();
-                const parsedIdeas = text.split('\n').filter(line => line.trim() !== '').map(line => {
-                    const firstSpaceIndex = line.indexOf(' ');
-                    if (firstSpaceIndex > -1) {
-                        return {
-                            emoji: line.substring(0, firstSpaceIndex).trim(),
-                            text: line.substring(firstSpaceIndex + 1).trim()
-                        };
-                    }
-                    return { emoji: '', text: line.trim() }; // Fallback if no space found
-                });
-                setAllAvailableIdeas(parsedIdeas);
-                console.log("All ideas loaded:", parsedIdeas.length);
+            // Fetch content from the suggestedIdeas.txt file
+            const response = await fetch('suggestedIdeas.txt');
+            if (!response.ok) {
+                throw new Error(`HTTP error! status: ${response.status}`);
             }
+            const text = await response.text();
 
-            // Select a random subset of ideas
-            const numIdeasToShow = 15; // You can adjust this number
-            const shuffled = [...allAvailableIdeas].sort(() => 0.5 - Math.random());
-            const selectedIdeas = shuffled.slice(0, numIdeasToShow);
-            setSuggestedIdeaList(selectedIdeas);
-            console.log("Random ideas selected:", selectedIdeas);
+            // Split the text into individual ideas, assuming each idea is on a new line
+            const ideasArray = text.split('\n').map(line => line.trim()).filter(line => line.length > 0);
 
+            if (ideasArray.length > 0) {
+                // Select a random idea
+                const randomIndex = Math.floor(Math.random() * ideasArray.length);
+                const randomIdea = ideasArray[randomIndex];
+                setSuggestedIdeas(randomIdea); // Display the randomly selected idea
+                setContent(randomIdea); // Set the QR content to the suggested idea
+            } else {
+                setSuggestedIdeas("No ideas found in suggestedIdeas.txt.");
+            }
         } catch (error) {
             console.error("Error fetching or parsing suggested ideas:", error);
-            showAlert("Could not load suggested ideas. Please check the 'suggestedIdeas.txt' file and try again.");
-            setSuggestedIdeaList([]); // Clear ideas on error
+            setSuggestedIdeas("An error occurred while fetching ideas.");
         } finally {
             setIsSuggestingIdeas(false);
         }
     };
 
-
     return (
         <div className={`min-h-screen font-inter antialiased ${currentThemeClasses.bg} ${currentThemeClasses.text} transition-all duration-500 ease-in-out`}>
             <div className="container mx-auto p-4 max-w-7xl">
@@ -800,15 +690,14 @@ const App = () => {
                             qrStyles={qrStyles} selectedStyleIndex={selectedStyleIndex}
                             setSelectedStyleIndex={setSelectedStyleIndex} styleCanvasRefs={styleCanvasRefs}
                             drawQrCode={drawQrCode}
-                            suggestedIdeaList={suggestedIdeaList} showSuggestedIdeas={showSuggestedIdeas} setShowSuggestedIdeas={setShowSuggestedIdeas}
-                            downloadFormat={downloadFormat} setDownloadFormat={setDownloadFormat}
-                            qrResolution={qrResolution} setQrResolution={setQrResolution}
+                            suggestedIdeas={suggestedIdeas} showSuggestedIdeas={showSuggestedIdeas} setShowSuggestedIdeas={setShowSuggestedIdeas}
+                            downloadResolution={downloadResolution} setDownloadResolution={setDownloadResolution} // Pass new prop
                         />
                     )}
                     {activeTab === 'decoder' && (
                         <QRDecoderTab
                             decodedContent={decodedContent} setDecodedContent={setDecodedContent}
-                            isSummarizing={isSummarizing} summarizeXml={summarizeXml}
+                            isSummarizing={isSummarizing} summarizeContent={summarizeContent}
                             showAlert={showAlert} decodeQrCode={decodeQrCode}
                             currentThemeClasses={currentThemeClasses}
                         />