Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

added Gemini_API: market campaign generator #297

Merged
merged 6 commits into from
Jun 23, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
29 changes: 29 additions & 0 deletions Existing_API_Collection/Gemini_API/README.md
Original file line number Diff line number Diff line change
@@ -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)

29 changes: 29 additions & 0 deletions Existing_API_Collection/Gemini_API/dist/index.html
Original file line number Diff line number Diff line change
@@ -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>
58 changes: 58 additions & 0 deletions Existing_API_Collection/Gemini_API/dist/styles.css
Original file line number Diff line number Diff line change
@@ -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;
}
Loading
Loading