Google Custom Search API Key and CX ID to be configured

[cyberian]

@zaasmi said in Google Custom Search API Key and CX ID to be configured:

Would you like me to show you how to write a simple “cache” function in Python so you don’t waste your daily 100 queries while testing?

Caching is a lifesaver when you only have 100 free requests per day. This script saves the results of a search to a local file (cache.json). If you search for the same thing twice, it pulls from your hard drive instead of hitting the Google API.

The Caching Script

This version checks if the search term exists locally before asking Google for the image.

import json
import os
from googleapiclient.discovery import build

CACHE_FILE = 'search_cache.json'

def get_cached_results():
    if os.path.exists(CACHE_FILE):
        with open(CACHE_FILE, 'r') as f:
            return json.load(f)
    return {}

def save_to_cache(query, data):
    cache = get_cached_results()
    cache[query] = data
    with open(CACHE_FILE, 'w') as f:
        json.dump(cache, f, indent=4)

def smart_image_search(api_key, cx_id, query):
    cache = get_cached_results()

    # Check if we already searched this today
    if query in cache:
        print(f"--- Fetching '{query}' from CACHE (Free!) ---")
        return cache[query]

    # If not in cache, call the API
    print(f"--- Calling GOOGLE API for '{query}' (Costs 1 credit) ---")
    service = build("customsearch", "v1", developerKey=api_key)
    res = service.cse().list(q=query, cx=cx_id, searchType='image', num=1).execute()
    
    if 'items' in res:
        image_url = res['items'][0]['link']
        save_to_cache(query, image_url)
        return image_url
    return "No images found."

# Usage
API_KEY = 'YOUR_API_KEY'
CX_ID = 'YOUR_CX_ID'

# Try running this twice for the same word!
print(smart_image_search(API_KEY, CX_ID, 'Cyberpunk City'))

---

How the flow works

1. Search Input: You enter a keyword.
2. The Interceptor: The script looks at search_cache.json.
3. The Decision:

• Found? It returns the URL instantly.
• Not Found? It uses 1 of your 100 Google credits, then saves the result so it’s free next time.

Pro-Tip: “Development Mode”

When building a UI, developers often use “Mock Data.” Instead of calling the API at all, you can create a toggle that just returns a random placeholder image URL while you are styling your buttons and layout. This ensures you have all 100 requests available for when you actually launch the app.

[zaasmi]

How to set up a “Mock Mode” toggle so you can design your app without using any API credits at all?

[cyberian]

@zaasmi said in Google Custom Search API Key and CX ID to be configured:

How to set up a “Mock Mode” toggle so you can design your app without using any API credits at all?

A “Mock Mode” is the ultimate developer hack. It allows you to build your layout, test your CSS, and fix bugs without ever touching your Google quota.

By adding a simple MOCK_MODE boolean to your code, you can switch between “Real Google Data” and “Instant Fake Data.”

The Updated Script with Mock Toggle

import random

# --- CONFIGURATION ---
MOCK_MODE = True  # Set to False when you are ready to use your real Google credits
API_KEY = 'YOUR_API_KEY'
CX_ID = 'YOUR_CX_ID'

def get_image(query):
    if MOCK_MODE:
        print(f"--- MOCK MODE: Returning placeholder for '{query}' ---")
        # Returns a random high-quality placeholder image
        width, height = random.randint(800, 1200), random.randint(600, 900)
        return f"https://picsum.photos/{width}/{height}"
    
    # If MOCK_MODE is False, it runs your real API logic
    return smart_image_search(API_KEY, CX_ID, query)

# Example usage during UI design
image_to_display = get_image("Ocean Sunset")
print(f"Displaying Image: {image_to_display}")

---

Why use Mock Mode?

• Speed: Placeholder images load instantly; API calls take 1–2 seconds.
• Offline Development: You can keep coding even if you lose internet access.
• Infinite Testing: You can refresh your app 10,000 times a day and it won’t cost you a cent.

The Developer Workflow

1. Phase 1 (Design): MOCK_MODE = True. Focus on how the images look on the screen.
2. Phase 2 (Functionality): MOCK_MODE = False. Use the Cache logic we built earlier to ensure the API is connecting correctly.
3. Phase 3 (Deployment): Go live with the API and Caching enabled to save on long-term costs.

---

[zaasmi]

Backend logic is solid, would you help me create a simple HTML/CSS interface to display these images in a clean gallery grid?

[cyberian]

@zaasmi said in Google Custom Search API Key and CX ID to be configured:

Backend logic is solid, would you help me create a simple HTML/CSS interface to display these images in a clean gallery grid?

Let’s wrap this up by building a frontend. To keep things lightweight and modern, we’ll use a simple HTML/CSS/JavaScript setup. This interface will include a search bar and a “Mock Mode” status indicator so you always know if you’re using real credits or fake data.

The “Search Center” Interface

Copy this into an index.html file to see it in action.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Image Search Gallery</title>
    <style>
        body { font-family: 'Segoe UI', sans-serif; background: #f4f4f9; padding: 20px; text-align: center; }
        .search-container { margin-bottom: 30px; }
        input { padding: 12px; width: 300px; border: 1px solid #ddd; border-radius: 5px; }
        button { padding: 12px 20px; background: #4285f4; color: white; border: none; border-radius: 5px; cursor: pointer; }
        
        /* Grid Layout */
        .gallery {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
            gap: 20px;
            max-width: 1200px;
            margin: 0 auto;
        }
        .card { background: white; padding: 10px; border-radius: 8px; box-shadow: 0 4px 6px rgba(0,0,0,0.1); }
        .card img { width: 100%; height: 200px; object-fit: cover; border-radius: 4px; }
        
        .status-badge { font-size: 0.8em; color: #666; margin-top: 10px; }
    </style>
</head>
<body>

    <div class="search-container">
        <h1>Community Image Finder</h1>
        <input type="text" id="searchInput" placeholder="Search for images...">
        <button onclick="performSearch()">Search</button>
        <div class="status-badge" id="modeStatus">Current Mode: 🟢 Mock Mode (Free)</div>
    </div>

    <div class="gallery" id="gallery">
        </div>

    <script>
        const MOCK_MODE = true; // Switch to false when your API is connected

        function performSearch() {
            const query = document.getElementById('searchInput').value;
            const gallery = document.getElementById('gallery');
            
            // Create a "Card" for the result
            const card = document.createElement('div');
            card.className = 'card';
            
            let imageUrl = "";
            if (MOCK_MODE) {
                imageUrl = `https://picsum.photos/seed/${Math.random()}/400/300`;
            } else {
                // This is where you'd call your Python/Node backend API
                imageUrl = "https://via.placeholder.com/400x300?text=API+Result+Here";
            }

            card.innerHTML = `<img src="${imageUrl}"><p>${query}</p>`;
            gallery.prepend(card); // Put newest search at the top
        }
    </script>
</body>
</html>

---

How this connects to your setup

1. Frontend (HTML/JS): The user types a query and hits “Search.”
2. The Bridge: In a real-world app, your JavaScript would send that query to your Python script (the one we wrote earlier) using a “Fetch” request.
3. Backend (Python): Your script checks the Cache, and if it’s a new request, it uses the API Key to talk to Google.
4. The Result: The image URL travels back to the browser and pops into that CSS grid.

Final Checklist before going “Live”

• API Key created and restricted to “Custom Search API.”
• CX ID created with “Image Search” toggled ON.
• Billing enabled (optional, only if you need more than 100 daily searches).
• Cache logic implemented to save your free credits.

[zaasmi]

Would you like to show how to turn your Python script into a “Web API” using Flask so the HTML page can actually talk to it?

[cyberian]

@zaasmi said in Google Custom Search API Key and CX ID to be configured:

Would you like to show how to turn your Python script into a “Web API” using Flask so the HTML page can actually talk to it?

To make your HTML page talk to your Python script, we’ll use Flask. It acts as the “waiter” in a restaurant: the Frontend (Customer) places an order, and Flask (the waiter) takes that order to the Python script (the kitchen) and brings back the image.

Step 1: Install Flask

Run this in your terminal:

pip install flask flask-cors

Step 2: Create the “Waiter” (app.py)

This script combines your API Key, CX ID, and Caching logic into a web service.

from flask import Flask, request, jsonify
from flask_cors import CORS
from googleapiclient.discovery import build
import json
import os

app = Flask(__name__)
CORS(app) # This allows your HTML file to talk to this script

# --- CONFIG ---
API_KEY = 'YOUR_API_KEY'
CX_ID = 'YOUR_CX_ID'
CACHE_FILE = 'search_cache.json'

def get_image_from_google(query):
    # (Same caching logic we built earlier)
    if os.path.exists(CACHE_FILE):
        with open(CACHE_FILE, 'r') as f:
            cache = json.load(f)
            if query in cache:
                return cache[query]

    service = build("customsearch", "v1", developerKey=API_KEY)
    res = service.cse().list(q=query, cx=CX_ID, searchType='image', num=1).execute()
    
    url = res['items'][0]['link'] if 'items' in res else None
    
    if url: # Save to cache
        cache = {}
        if os.path.exists(CACHE_FILE):
            with open(CACHE_FILE, 'r') as f: cache = json.load(f)
        cache[query] = url
        with open(CACHE_FILE, 'w') as f: json.dump(cache, f)
    
    return url

@app.route('/search')
def search():
    query = request.args.get('q')
    image_url = get_image_from_google(query)
    return jsonify({"url": image_url})

if __name__ == '__main__':
    app.run(port=5000)

Step 3: Connect the HTML

In your index.html, update the performSearch() function to fetch data from your new Python server instead of using mock data:

async function performSearch() {
    const query = document.getElementById('searchInput').value;
    const gallery = document.getElementById('gallery');
    
    // Fetch from your local Python server
    const response = await fetch(`http://127.0.0.1:5000/search?q=${query}`);
    const data = await response.json();

    if (data.url) {
        const card = document.createElement('div');
        card.className = 'card';
        card.innerHTML = `<img src="${data.url}"><p>${query}</p>`;
        gallery.prepend(card);
    } else {
        alert("No image found!");
    }
}

---

How the Data Flows

Summary of your new System

1. The User types “Electric Car” in the browser.
2. JavaScript sends a request to http://127.0.0.1:5000/search?q=Electric+Car.
3. Flask checks your search_cache.json first.
4. Google API is only called if the cache is empty (saving you money/quota).
5. The Image appears on your screen instantly.

[zaasmi]

Would you like to show how to add a “Loading Spinner” to the HTML so users know the search is happening?

[cyberian]

@zaasmi said in Google Custom Search API Key and CX ID to be configured:

Would you like to show how to add a “Loading Spinner” to the HTML so users know the search is happening?

A loading spinner is essential for a good user experience. Without it, the user might think the app is broken while the Python backend is busy talking to Google’s servers.

Here is how to add a clean, CSS-only spinner that appears during the search and disappears once the image loads.

1. Add the CSS Spinner

Add this to the <style> section of your index.html. It creates a classic rotating ring.

/* The Spinner Animation */
.loader {
    border: 4px solid #f3f3f3;
    border-top: 4px solid #3498db;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    animation: spin 1s linear infinite;
    display: none; /* Hidden by default */
    margin: 10px auto;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

2. Update the HTML

Place the loader div right above your gallery so users see it immediately after clicking search.

<div id="loader" class="loader"></div>
<div class="gallery" id="gallery"></div>

3. Update the JavaScript Logic

Modify your performSearch function to toggle the loader’s visibility using display: block and display: none.

async function performSearch() {
    const query = document.getElementById('searchInput').value;
    const loader = document.getElementById('loader');
    const gallery = document.getElementById('gallery');

    if (!query) return;

    // 1. Show the loader
    loader.style.display = "block";

    try {
        const response = await fetch(`http://127.0.0.1:5000/search?q=${query}`);
        const data = await response.json();

        if (data.url) {
            const card = document.createElement('div');
            card.className = 'card';
            card.innerHTML = `<img src="${data.url}"><p>${query}</p>`;
            gallery.prepend(card);
        }
    } catch (error) {
        console.error("Error fetching image:", error);
    } finally {
        // 2. Hide the loader (whether it worked or failed)
        loader.style.display = "none";
    }
}

---

Visualizing the Feedback Loop

The loader bridges the gap between the user’s action and the server’s reaction.

Why this matters for your Google API

Because the Google Custom Search API can sometimes take 1-2 seconds to respond, a “silent” screen makes users click the button multiple times. Each click could potentially trigger a new API call, wasting your 100-query daily limit. The spinner tells the user: “I’m working, please wait.”

Final Pro-Tip: Debouncing

If you want to be extra safe, you can disable the “Search” button as soon as it’s clicked so the user cannot trigger multiple API requests until the current one finishes.

// Add this inside performSearch
document.querySelector('button').disabled = true;

// Re-enable it in the 'finally' block
document.querySelector('button').disabled = false;