refactor: Use REST API for Gemini SQL generation

- Modified the `_generate_sql_from_natural_language` helper function in `routes/sql_explorer.py` to use direct REST API calls via the `requests` library instead of the `google-generativeai` Python library.
- Added `requests` and `json` imports and removed the `google-generativeai` import.
- Updated error handling for API communication and response parsing.
- Updated the corresponding changelog entry.

templates/partials/sql_explorer/sql_query.html

@@ -23,7 +23,34 @@
                 on input set my.style.height to 0 then set my.style.height to my.scrollHeight + 'px'">{{ query }}</textarea>
         </div>
 
-        <!-- Buttons -->
+        <!-- Natural Language Query Input -->
+        <div class="pt-2">
+            <label for="natural-query" class="block text-sm font-medium text-gray-700 pb-1">Generate SQL from Natural
+                Language</label>
+            <div class="flex items-center">
+                <input type="text" id="natural-query" name="natural_query"
+                    class="flex-grow p-2 border border-gray-300 rounded-l-md shadow-sm focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent"
+                    placeholder="e.g., 'Show me the number of workouts per person'">
+                <button type="button" hx-post="{{ url_for('sql_explorer.generate_sql') }}"
+                    hx-include="[name='natural_query']" hx-target="#query" hx-swap="innerHTML"
+                    hx-indicator="#sql-spinner"
+                    class="bg-purple-600 text-white p-2.5 rounded-r-md hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-opacity-50 inline-flex items-center">
+                    Generate SQL
+                    <span id="sql-spinner" class="htmx-indicator ml-2">
+                        <svg class="animate-spin h-4 w-4 text-white" xmlns="http://www.w3.org/2000/svg" fill="none"
+                            viewBox="0 0 24 24">
+                            <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4">
+                            </circle>
+                            <path class="opacity-75" fill="currentColor"
+                                d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z">
+                            </path>
+                        </svg>
+                    </span>
+                </button>
+            </div>
+        </div>
+
+        <!-- Action Buttons -->
         <div class="flex space-x-2 pt-1">
             <!-- Execute Button -->
             <button hx-post="{{ url_for('sql_explorer.execute_sql_query') }}" hx-target="#execute-query-results"