Merge pull request #297 from abckhush/master

added Gemini_API: market campaign generator
dishamodi0910 · Jun 23, 2024 · 8033e19 · 8033e19
2 parents e759f59 + 2eb7a45
commit 8033e19
Show file tree

Hide file tree

Showing 8 changed files with 4,128 additions and 1 deletion.
diff --git a/Existing_API_Collection/Gemini_API/README.md b/Existing_API_Collection/Gemini_API/README.md
@@ -0,0 +1,29 @@
+# GEMINI API : Market Campaign Generator
+
+## Description
+The GEMINI API: Market Campaign Generator is a web application designed to help users quickly create targeted marketing campaigns for their products. By leveraging Google's Gemini generative AI models, this application takes user inputs such as product name, target audience, and key message to generate a comprehensive and creative marketing campaign. This tool is perfect for marketers, small business owners, and anyone looking to craft engaging marketing content with ease.
+
+## Features
+1. User-Friendly Interface: A simple and intuitive form for entering product details, target audience, and key messages.
+2. AI-Powered Campaign Generation: Utilizes Google's Gemini AI model to generate creative and effective marketing campaigns based on user inputs.
+3. Real-Time Output: Instant display of generated campaigns directly on the webpage.
+4. Responsive Design: A responsive layout that works well on both desktop and mobile devices.
+
+## Usage
+1. Open `index.html` in the dist folder.
+2. Run in terminal: 
+   ```bash
+   npx webpack --config webpack.config.js
+   ```
+3. Fill in the Form:
+  - Enter the Product Name in the provided text box.
+  - Specify the Target Audience for your product.
+  - Type the Key Message you want to convey in the campaign.
+4. Generate Campaign: Click the "Generate Campaign" button to submit the form.
+5. View the Campaign: The generated marketing campaign will appear in the output section below the form.
+
+## Screenshots
+![image](https://github.com/abckhush/APIVerse/assets/127378920/f3c81045-a9d0-4fc6-be78-fb4e8413a26d)
+![image](https://github.com/abckhush/APIVerse/assets/127378920/bee69808-f74c-46ed-bccc-4ca3d9c29aad)
+![image](https://github.com/abckhush/APIVerse/assets/127378920/3facadb5-a809-45f4-aef7-b4b11b38e546)
+
diff --git a/Existing_API_Collection/Gemini_API/dist/index.html b/Existing_API_Collection/Gemini_API/dist/index.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Market Campaign Generator</title>
+    <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+    <div class="container">
+        <h1>Market Campaign Generator</h1>
+        <form id="campaign-form">
+            <label for="product">Product Name:</label>
+            <input type="text" id="product" name="product" required>
+
+            <label for="audience">Target Audience:</label>
+            <input type="text" id="audience" name="audience" required>
+
+            <label for="message">Key Message:</label>
+            <textarea id="message" name="message" required></textarea>
+
+            <button type="submit">Generate Campaign</button>
+        </form>
+
+        <div id="campaign-output" class="output"></div>
+    </div>
+    <script src="bundle.js"></script>
+</body>
+</html>
diff --git a/Existing_API_Collection/Gemini_API/dist/styles.css b/Existing_API_Collection/Gemini_API/dist/styles.css
@@ -0,0 +1,58 @@
+body {
+    font-family: Arial, sans-serif;
+    background-color: #f4f4f4;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: fit-content;
+    margin-top: 50px;
+    overflow: scroll;
+}
+
+.container {
+    background: white;
+    padding: 20px;
+    border-radius: 8px;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+    width: 300px;
+}
+
+h1 {
+    text-align: center;
+    margin-bottom: 20px;
+}
+
+label {
+    display: block;
+    margin-bottom: 5px;
+}
+
+input, textarea {
+    width: 90%;
+    padding: 8px;
+    margin-bottom: 10px;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+}
+
+button {
+    width: 100%;
+    padding: 10px;
+    background-color: #5cb85c;
+    color: white;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+}
+
+button:hover {
+    background-color: #4cae4c;
+}
+
+.output {
+    margin-top: 20px;
+    padding: 10px;
+    background-color: #e9e9e9;
+    border-radius: 4px;
+    height: fit-content;
+}