TonyDain

Introduction

Have you ever wanted a Bible verse to inspire you in moments of doubt, faith, or gratitude? Our AI-Powered Bible Verse Generator is designed to help! With just a keyword, the AI finds a perfect verse to uplift your spirit.

Features

• AI-Powered Verse Selection: Enter any theme, and AI finds the best matching Bible verse.
• User-Friendly Interface: Simple and elegant UI with dark mode.
• Desktop App: Works offline once installed on Windows and Mac.
• Copy & Share: Instantly copy or share your favorite verses.

Overview

The application is built using Streamlit, React, and Electron.js. It utilizes the OpenAI API to generate Bible verses dynamically.

Architecture

1. Frontend (React + Electron.js): User interface for input and display.
2. Backend (Streamlit + Python): Handles AI requests and serves responses.
3. Electron.js: Bundles the app as a desktop application.

Components

• Streamlit Backend (ai_bible_verse_app.py):
  • Accepts user input (theme/keyword)
  • Calls OpenAI API for verse generation
  • Sends response to frontend
• React Frontend (BibleVerseApp.js):
  • Handles UI interactions
  • Fetches data from Streamlit backend
  • Displays the generated verse
• Electron Main Process (electron_main.js):
  • Starts Streamlit backend
  • Loads React frontend
  • Manages app lifecycle

Frontend (Electron + React/Streamlit UI)

• User enters a theme or keyword (e.g., “faith,” “hope,” “love”).
• The app fetches an AI-generated Bible verse related to the theme.
• Users can save, copy, or share the verse.

Backend (Python + Streamlit)

• Uses an AI model to generate relevant Bible verses.
• Supports predefined themes or open-ended user inputs.
• Option to display explanations or cross-references.

Packaging (Electron)

• Wraps the app as a desktop application (Windows/Mac/Linux).
• Integrates the Streamlit app into an Electron window.

import streamlit as st
import openai  # Assuming OpenAI API is used for generating verses

# Set OpenAI API key
openai.api_key = "your_openai_api_key"

def generate_bible_verse(theme):
    prompt = f"Generate a Bible verse about {theme}."
    response = openai.Completion.create(
        engine="text-davinci-003",
        prompt=prompt,
        max_tokens=50
    )
    return response.choices[0].text.strip()

# Streamlit UI
st.title("AI-Powered Bible Verse Generator")
theme = st.text_input("Enter a theme or keyword:")
if st.button("Generate Verse"):
    if theme:
        verse = generate_bible_verse(theme)
        st.success(verse)
    else:
        st.warning("Please enter a theme.")

UI Layout (React + Tailwind for styling)

1. Header: “AI-Powered Bible Verse Generator” (with a Bible icon)
2. Input Field: Users enter a keyword or theme (e.g., “faith,” “hope”).
3. Generate Button: Triggers the verse generation.
4. Verse Display Area: Shows the generated verse with a smooth fade-in animation.
5. Copy & Share Buttons: Allows users to copy the verse or share it on social media.
6. Save Button: Saves favorite verses in a local storage list.
7. Sidebar (Optional): A history section displaying previously generated verses.

Color Theme:

• Background: Soft gradient (light beige to white, like old parchment)
• Buttons: Blue & gold theme for a spiritual feel
• Font: Elegant serif for Bible text

import { useState } from "react";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Card, CardContent } from "@/components/ui/card";
import { Moon, Sun, Copy, Share } from "lucide-react";
import { motion } from "framer-motion";

export default function BibleVerseApp() {
  const [theme, setTheme] = useState("");
  const [verse, setVerse] = useState("");
  const [darkMode, setDarkMode] = useState(false);

  const fetchVerse = async () => {
    if (!theme) return;
    const response = await fetch("http://localhost:8501/generate_verse?theme=" + theme);
    const data = await response.json();
    setVerse(data.verse);
  };

  return (
    <div className={darkMode ? "bg-gray-900 text-white" : "bg-gray-100 text-black"}>
      <div className="flex justify-between p-4">
        <h1 className="text-2xl font-bold">AI-Powered Bible Verse Generator</h1>
        <Button onClick={() => setDarkMode(!darkMode)}>
          {darkMode ? <Sun /> : <Moon />}
        </Button>
      </div>
      <div className="p-4 flex gap-2">
        <Input 
          value={theme} 
          onChange={(e) => setTheme(e.target.value)} 
          placeholder="Enter a theme (e.g., faith, love)" 
        />
        <Button onClick={fetchVerse}>Generate</Button>
      </div>
      {verse && (
        <motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }}>
          <Card className="m-4 p-4">
            <CardContent>
              <p className="text-lg italic">{verse}</p>
              <div className="flex gap-2 mt-2">
                <Button onClick={() => navigator.clipboard.writeText(verse)}><Copy /></Button>
                <Button onClick={() => alert("Sharing feature coming soon!") }><Share /></Button>
              </div>
            </CardContent>
          </Card>
        </motion.div>
      )}
    </div>
  );
}

Features Included:

Light & Dark Mode
User Input for Theme/Keyword
Fetching Verse from Streamlit Backend
Animated Verse Display
Copy & Share Buttons

Electron.js integration

const { app, BrowserWindow } = require("electron");
const { exec } = require("child_process");
let mainWindow;

app.whenReady().then(() => {
  // Start the Streamlit backend
  exec("streamlit run ai_bible_verse_app.py", (err, stdout, stderr) => {
    if (err) console.error("Error starting backend:", stderr);
  });

  mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true,
    },
  });
  
  mainWindow.loadURL("http://localhost:3000"); // React Frontend
});

app.on("window-all-closed", () => {
  if (process.platform !== "darwin") {
    app.quit();
  }
});

Starts the Streamlit backend automatically.
Loads the React frontend inside an Electron window.
Handles app closing gracefully.

configure Electron Builder to generate Windows EXE & Mac DMG installers.

{
  "name": "ai-bible-verse-generator",
  "version": "1.0.0",
  "main": "electron_main.js",
  "scripts": {
    "start": "electron .",
    "build:win": "electron-builder --win --x64",
    "build:mac": "electron-builder --mac"
  },
  "dependencies": {
    "electron": "^27.0.0"
  },
  "devDependencies": {
    "electron-builder": "^24.0.0"
  },
  "build": {
    "appId": "com.yourname.bibleverseapp",
    "productName": "AI Bible Verse Generator",
    "win": {
      "target": "nsis",
      "icon": "icons/icon.ico"
    },
    "mac": {
      "target": "dmg",
      "icon": "icons/icon.icns"
    }
  }
}

How to Build the App:

1. Run npm install to install dependencies.
2. Run npm run build:win for Windows EXE.
3. Run npm run build:mac for Mac DMG.

API Integration

• OpenAI API: Used to generate Bible verses based on input.
• Local API Communication: http://localhost:8501/generate_verse?theme=<keyword>

Packaging & Deployment

• Uses Electron Builder for creating Windows (.exe) and Mac (.dmg) installers.
• Run npm run build:win for Windows.
• Run npm run build:mac for Mac.