AjmalCybro
2 months ago
104 changed files with 2973 additions and 0 deletions
@ -0,0 +1,75 @@ |
|||||
|
# Generative AI for Odoo 18 |
||||
|
|
||||
|
[](https://www.odoo.com) |
||||
|
[](https://opensource.org/licenses/MIT) |
||||
|
|
||||
|
## Overview |
||||
|
|
||||
|
The Generative AI for Odoo 18 module allows users to generate website snippets using AI-powered text prompts directly within the Odoo Website Editor. It seamlessly integrates with OpenAI and OpenRouter to enhance content creation and streamline web development workflows. |
||||
|
|
||||
|
## Features |
||||
|
|
||||
|
- 💾 Instantly generate custom website snippets from text prompts using OpenAI or OpenRouter. |
||||
|
- 🧠 Create, preview, and insert AI-generated snippets directly within Odoo’s website editor. |
||||
|
- ⚙️ Easily configure AI provider, model, and token limits from Odoo settings for full control. |
||||
|
|
||||
|
## Screenshots |
||||
|
|
||||
|
Here are some glimpses of Generative AI |
||||
|
|
||||
|
### User Interface of Website module |
||||
|
|
||||
|
<div> |
||||
|
<tr> |
||||
|
<td align="center"> |
||||
|
<img src="static/description/assets/screenshots/Screenshot1.png" alt="Screenshot 1" width="500" style="border: none;"/> |
||||
|
</td> |
||||
|
</tr> |
||||
|
</div> |
||||
|
<div> |
||||
|
<tr> |
||||
|
<td align="center"> |
||||
|
<img src="static/description/assets/screenshots/Screenshot1.png" alt="Screenshot 2" width="500" style="border: none;"/> |
||||
|
</td> |
||||
|
</tr> |
||||
|
</div> |
||||
|
<div> |
||||
|
<tr> |
||||
|
<td align="center"> |
||||
|
<img src="static/description/assets/screenshots/Screenshot1.png" alt="Screenshot 3" width="500" style="border: none;"/> |
||||
|
</td> |
||||
|
</tr> |
||||
|
</div> |
||||
|
<div> |
||||
|
<tr> |
||||
|
<td align="center"> |
||||
|
<img src="static/description/assets/screenshots/Screenshot1.png" alt="Screenshot 4" width="500" style="border: none;"/> |
||||
|
</td> |
||||
|
</tr> |
||||
|
</div> |
||||
|
<div> |
||||
|
<tr> |
||||
|
<td align="center"> |
||||
|
<img src="static/description/assets/screenshots/Screenshot1.png" alt="Screenshot 5" width="500" style="border: none;"/> |
||||
|
</td> |
||||
|
</tr> |
||||
|
</div> |
||||
|
<div> |
||||
|
<tr> |
||||
|
<td align="center"> |
||||
|
<img src="static/description/assets/screenshots/Screenshot1.png" alt="Screenshot 6" width="500" style="border: none;"/> |
||||
|
</td> |
||||
|
</tr> |
||||
|
</div> |
||||
|
|
||||
|
|
||||
|
|
||||
|
## Prerequisites |
||||
|
|
||||
|
Before you begin, ensure you have the following installed: |
||||
|
|
||||
|
- An active Odoo Community/Enterprise Edition instance (local or hosted) |
||||
|
|
||||
|
## Configuration |
||||
|
- Ensure the OpenAI Python package is installed. |
||||
|
|
||||
@ -0,0 +1,23 @@ |
|||||
|
# -*- coding: utf-8 -*- |
||||
|
############################################################################# |
||||
|
# |
||||
|
# Cybrosys Technologies Pvt. Ltd. |
||||
|
# |
||||
|
# Copyright (C) 2025-TODAY Cybrosys Technologies(<https://www.cybrosys.com>). |
||||
|
# Author: Cybrosys Techno Solutions(<https://www.cybrosys.com>) |
||||
|
# |
||||
|
# You can modify it under the terms of the GNU AFFERO |
||||
|
# GENERAL PUBLIC LICENSE (AGPL v3), Version 3. |
||||
|
# |
||||
|
# This program is distributed in the hope that it will be useful, |
||||
|
# but WITHOUT ANY WARRANTY; without even the implied warranty of |
||||
|
# MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the |
||||
|
# GNU AFFERO GENERAL PUBLIC LICENSE (AGPL v3) for more details. |
||||
|
# |
||||
|
# You should have received a copy of the GNU AFFERO GENERAL PUBLIC LICENSE |
||||
|
# (AGPL v3) along with this program. |
||||
|
# If not, see <http://www.gnu.org/licenses/>. |
||||
|
# |
||||
|
############################################################################# |
||||
|
from . import controllers |
||||
|
from . import models |
||||
@ -0,0 +1,64 @@ |
|||||
|
# -*- coding: utf-8 -*- |
||||
|
############################################################################# |
||||
|
# |
||||
|
# Cybrosys Technologies Pvt. Ltd. |
||||
|
# |
||||
|
# Copyright (C) 2025-TODAY Cybrosys Technologies(<https://www.cybrosys.com>). |
||||
|
# Author: Cybrosys Techno Solutions(<https://www.cybrosys.com>) |
||||
|
# |
||||
|
# You can modify it under the terms of the GNU AFFERO |
||||
|
# GENERAL PUBLIC LICENSE (AGPL v3), Version 3. |
||||
|
# |
||||
|
# This program is distributed in the hope that it will be useful, |
||||
|
# but WITHOUT ANY WARRANTY; without even the implied warranty of |
||||
|
# MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the |
||||
|
# GNU AFFERO GENERAL PUBLIC LICENSE (AGPL v3) for more details. |
||||
|
# |
||||
|
# You should have received a copy of the GNU AFFERO GENERAL PUBLIC LICENSE |
||||
|
# (AGPL v3) along with this program. |
||||
|
# If not, see <http://www.gnu.org/licenses/>. |
||||
|
# |
||||
|
############################################################################# |
||||
|
{ |
||||
|
'name': 'Generative AI In Snippet Creation', |
||||
|
'version': '18.0.1.0.0', |
||||
|
'category': 'Generative AI/Generative AI', |
||||
|
'summary': 'To integrate AI tools in website snippet creation.', |
||||
|
'description': """This module contains details about Generative AI in website.""", |
||||
|
'author': 'Cybrosys Techno Solutions', |
||||
|
'company': 'Cybrosys Techno Solutions', |
||||
|
'maintainer': 'Cybrosys Techno Solutions', |
||||
|
'website': 'https://www.cybrosys.com', |
||||
|
'depends': [ |
||||
|
'base', 'website', 'web', 'web_editor' |
||||
|
], |
||||
|
'external_dependencies': { |
||||
|
'python': [ |
||||
|
'openai', |
||||
|
], |
||||
|
}, |
||||
|
'data': [ |
||||
|
'security/ir.model.access.csv', |
||||
|
'data/test_data.xml', |
||||
|
'views/res_config_settings_views.xml', |
||||
|
'views/snippets/s_snippet_group_with_ai_content.xml', |
||||
|
'views/snippets.xml', |
||||
|
], |
||||
|
'assets': { |
||||
|
'web_editor.assets_wysiwyg': [ |
||||
|
'generative_ai/static/src/xml/website_dialogue_box.xml', |
||||
|
'generative_ai/static/src/js/ai_button_action.js', |
||||
|
('include', 'web._assets_helpers'), |
||||
|
'generative_ai/static/src/js/title.js', |
||||
|
], |
||||
|
'web.assets_backend': [ |
||||
|
'generative_ai/static/src/img/placeholder.png', |
||||
|
'generative_ai/static/src/css/snippets.css', |
||||
|
], |
||||
|
}, |
||||
|
'images': ['static/description/banner.jpg'], |
||||
|
'license': 'AGPL-3', |
||||
|
'installable': True, |
||||
|
'auto_install': False, |
||||
|
'application': True, |
||||
|
} |
||||
@ -0,0 +1,22 @@ |
|||||
|
# -*- coding: utf-8 -*- |
||||
|
############################################################################# |
||||
|
# |
||||
|
# Cybrosys Technologies Pvt. Ltd. |
||||
|
# |
||||
|
# Copyright (C) 2025-TODAY Cybrosys Technologies(<https://www.cybrosys.com>). |
||||
|
# Author: Cybrosys Techno Solutions(<https://www.cybrosys.com>) |
||||
|
# |
||||
|
# You can modify it under the terms of the GNU AFFERO |
||||
|
# GENERAL PUBLIC LICENSE (AGPL v3), Version 3. |
||||
|
# |
||||
|
# This program is distributed in the hope that it will be useful, |
||||
|
# but WITHOUT ANY WARRANTY; without even the implied warranty of |
||||
|
# MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the |
||||
|
# GNU AFFERO GENERAL PUBLIC LICENSE (AGPL v3) for more details. |
||||
|
# |
||||
|
# You should have received a copy of the GNU AFFERO GENERAL PUBLIC LICENSE |
||||
|
# (AGPL v3) along with this program. |
||||
|
# If not, see <http://www.gnu.org/licenses/>. |
||||
|
# |
||||
|
############################################################################# |
||||
|
from . import main |
||||
@ -0,0 +1,400 @@ |
|||||
|
# -*- coding: utf-8 -*- |
||||
|
############################################################################# |
||||
|
# |
||||
|
# Cybrosys Technologies Pvt. Ltd. |
||||
|
# |
||||
|
# Copyright (C) 2025-TODAY Cybrosys Technologies(<https://www.cybrosys.com>). |
||||
|
# Author: Cybrosys Techno Solutions(<https://www.cybrosys.com>) |
||||
|
# |
||||
|
# You can modify it under the terms of the GNU AFFERO |
||||
|
# GENERAL PUBLIC LICENSE (AGPL v3), Version 3. |
||||
|
# |
||||
|
# This program is distributed in the hope that it will be useful, |
||||
|
# but WITHOUT ANY WARRANTY; without even the implied warranty of |
||||
|
# MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the |
||||
|
# GNU AFFERO GENERAL PUBLIC LICENSE (AGPL v3) for more details. |
||||
|
# |
||||
|
# You should have received a copy of the GNU AFFERO GENERAL PUBLIC LICENSE |
||||
|
# (AGPL v3) along with this program. |
||||
|
# If not, see <http://www.gnu.org/licenses/>. |
||||
|
# |
||||
|
############################################################################# |
||||
|
import hashlib |
||||
|
import re |
||||
|
import requests |
||||
|
from markupsafe import Markup |
||||
|
from openai import OpenAI |
||||
|
from odoo import http |
||||
|
from odoo.http import request |
||||
|
|
||||
|
|
||||
|
def preprocess_ai_output(text): |
||||
|
""" |
||||
|
Preprocesses AI-generated text by carefully extracting and closing CSS rules. |
||||
|
Args: |
||||
|
text (str): Input text containing HTML and CSS |
||||
|
Returns: |
||||
|
str: Preprocessed text with properly closed CSS |
||||
|
""" |
||||
|
text = re.sub(r'^```(html|css|plaintext)?\s*', '', text.strip(), flags=re.MULTILINE) |
||||
|
text = re.sub(r'\s*```$', '', text, flags=re.MULTILINE) |
||||
|
# Check if style tags already exist |
||||
|
style_match = re.search(r'<style>(.*?)</style>', text, re.DOTALL) |
||||
|
if style_match: |
||||
|
return text |
||||
|
css_lines = [] |
||||
|
html_lines = [] |
||||
|
current_rule = [] |
||||
|
in_css_block = False |
||||
|
for line in text.split('\n'): |
||||
|
stripped_line = line.strip() |
||||
|
if re.match(r'^(\.|#|[a-zA-Z])[\w\s,#>:.()-]+\s*{', stripped_line): |
||||
|
in_css_block = True |
||||
|
current_rule = [line] |
||||
|
elif in_css_block: |
||||
|
current_rule.append(line) |
||||
|
if stripped_line.endswith('}'): |
||||
|
css_lines.extend(current_rule) |
||||
|
current_rule = [] |
||||
|
in_css_block = False |
||||
|
else: |
||||
|
if stripped_line: |
||||
|
html_lines.append(line) |
||||
|
if current_rule: |
||||
|
if not current_rule[-1].strip().endswith('}'): |
||||
|
current_rule[-1] = current_rule[-1] + '\n}' |
||||
|
css_lines.extend(current_rule) |
||||
|
if css_lines: |
||||
|
css_output = "<style>\n" + "\n".join(css_lines) + "\n</style>" |
||||
|
else: |
||||
|
css_output = "" |
||||
|
html_output = "\n".join(html_lines) |
||||
|
final_output = f"{css_output}\n{html_output}" if css_output else html_output |
||||
|
return final_output.strip() |
||||
|
|
||||
|
|
||||
|
class SnippetGenerator(http.Controller): |
||||
|
|
||||
|
|
||||
|
def _generate_unique_id(self, snippet_name): |
||||
|
"""Generate a unique ID for the snippet to avoid CSS conflicts""" |
||||
|
return hashlib.md5(f"{snippet_name}_{request.session.sid}".encode()).hexdigest()[ |
||||
|
:8] |
||||
|
|
||||
|
def _generate_openai_response(self, prompt, api_key, model_id, max_tokens, |
||||
|
snippet_name): |
||||
|
"""Helper method for OpenAI API calls""" |
||||
|
response = OpenAI(api_key=api_key).chat.completions.create( |
||||
|
model=model_id, |
||||
|
messages=[ |
||||
|
{"role": "system", |
||||
|
"content": "You are a helpful assistant that generates website snippets similar to Odoo's inbuilt website snippets. " |
||||
|
"Create responsive snippets using Bootstrap classes, ensuring proper container and row/column structure. " |
||||
|
"Use placeholder images from 'https://via.placeholder.com/' with appropriate sizes. " |
||||
|
"Return only clean HTML and CSS without any wrapper divs or preview elements. " |
||||
|
"Do not include any code block markers (```). " |
||||
|
"Focus on creating functional, beautiful snippets that work well in Odoo's website builder. " |
||||
|
"Use modern design principles with good typography, spacing, and colors." |
||||
|
}, |
||||
|
{"role": "user", "content": prompt} |
||||
|
], |
||||
|
max_tokens=int(max_tokens), |
||||
|
temperature=0.7 |
||||
|
) |
||||
|
return response.choices[0].message.content.strip() |
||||
|
|
||||
|
def _generate_openrouter_response(self, prompt, api_key, model_id, max_tokens, |
||||
|
snippet_name): |
||||
|
"""Helper method for OpenRouter API calls with improved error handling""" |
||||
|
url = "https://openrouter.ai/api/v1/chat/completions" |
||||
|
headers = { |
||||
|
"Authorization": f"Bearer {api_key}", |
||||
|
"HTTP-Referer": request.env['ir.config_parameter'].sudo().get_param( |
||||
|
'web.base.url', ''), |
||||
|
"X-Title": "Odoo Integration" |
||||
|
} |
||||
|
payload = { |
||||
|
"model": model_id, |
||||
|
"messages": [ |
||||
|
{"role": "system", |
||||
|
"content": "You are a helpful assistant that generates website snippets similar to Odoo's inbuilt website snippets. " |
||||
|
"Create responsive snippets using Bootstrap classes, ensuring proper container and row/column structure. " |
||||
|
"Use placeholder images from 'https://via.placeholder.com/' with appropriate sizes. " |
||||
|
"Return only clean HTML and CSS without any wrapper divs or preview elements. " |
||||
|
"Do not include any code block markers (```). " |
||||
|
"Focus on creating functional, beautiful snippets that work well in Odoo's website builder. " |
||||
|
"Use modern design principles with good typography, spacing, and colors." |
||||
|
}, |
||||
|
{"role": "user", "content": prompt} |
||||
|
], |
||||
|
"max_tokens": int(max_tokens), |
||||
|
"temperature": 0.7 |
||||
|
} |
||||
|
response = requests.post(url, headers=headers, json=payload) |
||||
|
if response.status_code != 200: |
||||
|
raise Exception( |
||||
|
f"OpenRouter API error: {response.status_code} - {response.text}") |
||||
|
json_response = response.json() |
||||
|
if 'choices' not in json_response or not json_response['choices']: |
||||
|
raise Exception("Invalid response format from OpenRouter API") |
||||
|
choice = json_response['choices'][0] |
||||
|
if 'message' not in choice: |
||||
|
raise Exception("No message in OpenRouter API response") |
||||
|
message = choice['message'] |
||||
|
content = message.get('content', '') |
||||
|
reasoning = message.get('reasoning', '') |
||||
|
partial_content = content.strip() if content else reasoning.strip() |
||||
|
if choice.get('finish_reason') == 'length' and partial_content: |
||||
|
completion_prompt = f""" |
||||
|
You previously started generating a website snippet but it was cut off. |
||||
|
Please complete the snippet based on this partial content: |
||||
|
{partial_content} |
||||
|
Continue from where it was cut off and make sure the HTML/CSS is complete and valid. |
||||
|
""" |
||||
|
completion_payload = { |
||||
|
"model": model_id, |
||||
|
"messages": [ |
||||
|
{"role": "system", |
||||
|
"content": "You are completing a partially generated website snippet. " |
||||
|
"Return only HTML/CSS code to complete the snippet, don't start over."}, |
||||
|
{"role": "user", "content": completion_prompt} |
||||
|
], |
||||
|
"max_tokens": int(max_tokens), |
||||
|
"temperature": 0.7 |
||||
|
} |
||||
|
try: |
||||
|
completion_response = requests.post(url, headers=headers, |
||||
|
json=completion_payload) |
||||
|
completion_response.raise_for_status() |
||||
|
completion_json = completion_response.json() |
||||
|
if 'choices' in completion_json and completion_json['choices']: |
||||
|
completion_message = completion_json['choices'][0]['message'] |
||||
|
completion_content = completion_message.get('content', '') |
||||
|
if completion_content: |
||||
|
cleaned_completion = re.sub(r"^```(html|css)?\s*", "", |
||||
|
completion_content.strip(), |
||||
|
flags=re.MULTILINE) |
||||
|
cleaned_completion = re.sub(r"\s*```$", "", cleaned_completion, |
||||
|
flags=re.MULTILINE) |
||||
|
combined_content = partial_content + "\n" + cleaned_completion |
||||
|
return combined_content |
||||
|
return partial_content |
||||
|
except Exception: |
||||
|
return partial_content + "\n<!-- Note: This snippet is incomplete. The system attempted to complete it but encountered an error. -->" |
||||
|
if content: |
||||
|
return content.strip() |
||||
|
elif reasoning: |
||||
|
return reasoning.strip() |
||||
|
else: |
||||
|
raise Exception( |
||||
|
"Empty response from AI model. Please try again with a " |
||||
|
"different prompt or model.") |
||||
|
|
||||
|
@http.route('/website/generate_snippet', type='json', auth='user', website=True) |
||||
|
def generate_snippet(self, **kwargs): |
||||
|
"""Single route to handle both OpenAI and OpenRouter snippet generation""" |
||||
|
prompt = kwargs.get('prompt') |
||||
|
snippet_name = kwargs.get('name') |
||||
|
if not prompt: |
||||
|
return {'error': "Prompt is required"} |
||||
|
try: |
||||
|
api_key = request.env['ir.config_parameter'].sudo().get_param('api_key') |
||||
|
ai_system = request.env['ir.config_parameter'].sudo().get_param( |
||||
|
'generative_ai_systems') |
||||
|
max_tokens = request.env['ir.config_parameter'].sudo().get_param('max_token') |
||||
|
if not api_key: |
||||
|
return {'error': "API key not configured"} |
||||
|
unique_id = self._generate_unique_id(snippet_name) |
||||
|
try: |
||||
|
if ai_system == 'openai': |
||||
|
model_id = request.env['ir.config_parameter'].sudo().get_param( |
||||
|
'model_id') |
||||
|
if not model_id: |
||||
|
return {'error': "No OpenAI model selected"} |
||||
|
snippet_text = self._generate_openai_response(prompt, api_key, |
||||
|
model_id, max_tokens, |
||||
|
snippet_name) |
||||
|
elif ai_system == 'openrouter': |
||||
|
model_id = request.env['ir.config_parameter'].sudo().get_param( |
||||
|
'openrouter_model_id') |
||||
|
if not model_id or model_id == 'none': |
||||
|
return {'error': "No OpenRouter model selected"} |
||||
|
snippet_text = self._generate_openrouter_response(prompt, api_key, |
||||
|
model_id, |
||||
|
max_tokens, |
||||
|
snippet_name) |
||||
|
else: |
||||
|
return {'error': "Invalid AI system selected"} |
||||
|
except Exception as api_error: |
||||
|
return {'error': f"API Error: {str(api_error)}", 'retry': True} |
||||
|
# Check if we got a valid response |
||||
|
if not snippet_text or snippet_text.strip() == "": |
||||
|
return { |
||||
|
'error': "AI did not generate any content. Please try again with a different prompt or model.", |
||||
|
'retry': True |
||||
|
} |
||||
|
processed_snippet_text = preprocess_ai_output(snippet_text) |
||||
|
preview_style = f""" |
||||
|
<style> |
||||
|
.snippet-preview-{unique_id} {{ |
||||
|
position: relative !important; |
||||
|
min-width: 600px !important; |
||||
|
min-height: 400px !important; |
||||
|
width: 100% !important; |
||||
|
background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%) !important; |
||||
|
border-radius: 12px !important; |
||||
|
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important; |
||||
|
overflow: visible !important; |
||||
|
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; |
||||
|
display: flex !important; |
||||
|
flex-direction: column !important; |
||||
|
align-items: center !important; |
||||
|
justify-content: center !important; |
||||
|
padding: 20px !important; |
||||
|
box-sizing: border-box !important; |
||||
|
cursor: pointer !important; |
||||
|
}} |
||||
|
|
||||
|
.snippet-preview-{unique_id}:hover {{ |
||||
|
transform: translateY(-5px) !important; |
||||
|
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15) !important; |
||||
|
}} |
||||
|
|
||||
|
.snippet-preview-{unique_id}::before {{ |
||||
|
content: '' !important; |
||||
|
position: absolute !important; |
||||
|
top: 0 !important; |
||||
|
left: 0 !important; |
||||
|
right: 0 !important; |
||||
|
height: 4px !important; |
||||
|
background: linear-gradient(90deg, #667eea 0%, #764ba2 100%) !important; |
||||
|
z-index: 1 !important; |
||||
|
}} |
||||
|
|
||||
|
.snippet-name-{unique_id} {{ |
||||
|
position: absolute !important; |
||||
|
top: -10px !important; |
||||
|
left: 50% !important; |
||||
|
transform: translateX(-50%) !important; |
||||
|
background: rgba(255, 255, 255, 0.95) !important; |
||||
|
backdrop-filter: blur(10px) !important; |
||||
|
-webkit-backdrop-filter: blur(10px) !important; |
||||
|
color: #2d3748 !important; |
||||
|
padding: 12px 20px !important; |
||||
|
border-radius: 25px !important; |
||||
|
font-size: 16px !important; |
||||
|
font-weight: 600 !important; |
||||
|
letter-spacing: 0.5px !important; |
||||
|
opacity: 0 !important; |
||||
|
visibility: hidden !important; |
||||
|
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; |
||||
|
z-index: 1000 !important; |
||||
|
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15) !important; |
||||
|
border: 1px solid rgba(255, 255, 255, 0.3) !important; |
||||
|
white-space: nowrap !important; |
||||
|
pointer-events: none !important; |
||||
|
min-width: 120px !important; |
||||
|
text-align: center !important; |
||||
|
}} |
||||
|
|
||||
|
.snippet-preview-{unique_id}:hover .snippet-name-{unique_id} {{ |
||||
|
opacity: 1 !important; |
||||
|
visibility: visible !important; |
||||
|
transform: translateX(-50%) translateY(-8px) !important; |
||||
|
pointer-events: auto !important; |
||||
|
}} |
||||
|
|
||||
|
/* Alternative hover trigger - also trigger on any child hover */ |
||||
|
.snippet-preview-{unique_id} *:hover ~ .snippet-name-{unique_id}, |
||||
|
.snippet-preview-{unique_id} .snippet-content-{unique_id}:hover ~ .snippet-name-{unique_id} {{ |
||||
|
opacity: 1 !important; |
||||
|
visibility: visible !important; |
||||
|
transform: translateX(-50%) translateY(-8px) !important; |
||||
|
}} |
||||
|
|
||||
|
.snippet-content-{unique_id} {{ |
||||
|
width: 100% !important; |
||||
|
max-width: 100% !important; |
||||
|
z-index: 2 !important; |
||||
|
position: relative !important; |
||||
|
background: white !important; |
||||
|
border-radius: 8px !important; |
||||
|
padding: 20px !important; |
||||
|
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08) !important; |
||||
|
margin-top: 30px !important; |
||||
|
}} |
||||
|
|
||||
|
/* Ensure content doesn't overflow */ |
||||
|
.snippet-content-{unique_id} * {{ |
||||
|
max-width: 100% !important; |
||||
|
box-sizing: border-box !important; |
||||
|
}} |
||||
|
|
||||
|
/* Style for cards and common elements */ |
||||
|
.snippet-content-{unique_id} .card {{ |
||||
|
border: none !important; |
||||
|
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1) !important; |
||||
|
border-radius: 8px !important; |
||||
|
transition: transform 0.2s ease !important; |
||||
|
}} |
||||
|
|
||||
|
.snippet-content-{unique_id} .card:hover {{ |
||||
|
transform: translateY(-2px) !important; |
||||
|
}} |
||||
|
|
||||
|
.snippet-content-{unique_id} .btn {{ |
||||
|
border-radius: 6px !important; |
||||
|
font-weight: 500 !important; |
||||
|
transition: all 0.2s ease !important; |
||||
|
}} |
||||
|
|
||||
|
.snippet-content-{unique_id} .btn-primary {{ |
||||
|
background: linear-gradient(45deg, #667eea, #764ba2) !important; |
||||
|
border: none !important; |
||||
|
}} |
||||
|
|
||||
|
.snippet-content-{unique_id} .btn-primary:hover {{ |
||||
|
background: linear-gradient(45deg, #5a67d8, #6b46c1) !important; |
||||
|
transform: translateY(-1px) !important; |
||||
|
}} |
||||
|
|
||||
|
/* Fallback JavaScript-free hover detection */ |
||||
|
.snippet-preview-{unique_id}:focus-within .snippet-name-{unique_id} {{ |
||||
|
opacity: 1 !important; |
||||
|
visibility: visible !important; |
||||
|
transform: translateX(-50%) translateY(-8px) !important; |
||||
|
}} |
||||
|
</style>""" |
||||
|
|
||||
|
# Wrap content with unique scoped classes |
||||
|
wrapped_content = f""" |
||||
|
{preview_style} |
||||
|
<div class="snippet-preview-{unique_id}" title="{snippet_name}"> |
||||
|
<div class="snippet-name-{unique_id}">{snippet_name}</div> |
||||
|
<div class="snippet-content-{unique_id}"> |
||||
|
{processed_snippet_text} |
||||
|
</div> |
||||
|
</div> |
||||
|
""" |
||||
|
if not wrapped_content or wrapped_content.strip() == "": |
||||
|
return { |
||||
|
'error': "Could not process AI output into a valid snippet. Please try again.", |
||||
|
'retry': True |
||||
|
} |
||||
|
snippet = request.env['website.snippet.data'].sudo().create({ |
||||
|
'name': snippet_name, |
||||
|
'content': Markup(wrapped_content), |
||||
|
'image_url': '/generative_ai/static/src/img/placeholder.png', |
||||
|
'is_ai_generated': True, |
||||
|
}) |
||||
|
request.env['ir.qweb'].clear_caches() |
||||
|
request.env['ir.ui.view'].clear_caches() |
||||
|
return { |
||||
|
'success': True, |
||||
|
'snippet': snippet, |
||||
|
'snippet_id': snippet.id, |
||||
|
'content': snippet.content, |
||||
|
'image_url': '/generative_ai/static/src/img/placeholder.png' |
||||
|
} |
||||
|
except Exception as e: |
||||
|
return {'error': str(e), 'retry': True} |
||||
@ -0,0 +1,17 @@ |
|||||
|
<?xml version="1.0" encoding="UTF-8"?> |
||||
|
<odoo noupdate="1"> |
||||
|
<data> |
||||
|
<record id="default_ai_snippet" model="website.snippet.data"> |
||||
|
<field name="name">Default AI Snippet</field> |
||||
|
<field name="content"><![CDATA[ |
||||
|
<div class="default-ai-snippet" style="background-color: #f4f4f4; padding: 20px; text-align: center; border-radius: 10px;"> |
||||
|
<h1 style="color: #007bff;">Welcome to AI Generated Snippets</h1> |
||||
|
<img src="generative_ai/static/src/img/placeholder.png" alt="AI Snippet Image" style="width: 350px; height: auto; margin: 10px auto; display: block;"> |
||||
|
<p style="color: #333; font-size: 45px;">This is a default snippet that showcases AI capabilities.</p> |
||||
|
</div> |
||||
|
]]></field> |
||||
|
<field name="image_url">generative_ai/static/src/img/placeholder.png</field> |
||||
|
<field name="is_ai_generated">True</field> |
||||
|
</record> |
||||
|
</data> |
||||
|
</odoo> |
||||
@ -0,0 +1,6 @@ |
|||||
|
## Module <generative_ai> |
||||
|
|
||||
|
#### 21.07.2025 |
||||
|
#### Version 18.0.1.0.0 |
||||
|
##### ADD |
||||
|
- Initial commit for Generative AI. |
||||
@ -0,0 +1,23 @@ |
|||||
|
# -*- coding: utf-8 -*- |
||||
|
############################################################################# |
||||
|
# |
||||
|
# Cybrosys Technologies Pvt. Ltd. |
||||
|
# |
||||
|
# Copyright (C) 2025-TODAY Cybrosys Technologies(<https://www.cybrosys.com>). |
||||
|
# Author: Cybrosys Techno Solutions(<https://www.cybrosys.com>) |
||||
|
# |
||||
|
# You can modify it under the terms of the GNU AFFERO |
||||
|
# GENERAL PUBLIC LICENSE (AGPL v3), Version 3. |
||||
|
# |
||||
|
# This program is distributed in the hope that it will be useful, |
||||
|
# but WITHOUT ANY WARRANTY; without even the implied warranty of |
||||
|
# MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the |
||||
|
# GNU AFFERO GENERAL PUBLIC LICENSE (AGPL v3) for more details. |
||||
|
# |
||||
|
# You should have received a copy of the GNU AFFERO GENERAL PUBLIC LICENSE |
||||
|
# (AGPL v3) along with this program. |
||||
|
# If not, see <http://www.gnu.org/licenses/>. |
||||
|
# |
||||
|
############################################################################# |
||||
|
from . import res_config_settings |
||||
|
from . import website_snippet_data |
||||
@ -0,0 +1,141 @@ |
|||||
|
# -*- coding: utf-8 -*- |
||||
|
############################################################################# |
||||
|
# |
||||
|
# Cybrosys Technologies Pvt. Ltd. |
||||
|
# |
||||
|
# Copyright (C) 2025-TODAY Cybrosys Technologies(<https://www.cybrosys.com>). |
||||
|
# Author: Cybrosys Techno Solutions(<https://www.cybrosys.com>) |
||||
|
# |
||||
|
# You can modify it under the terms of the GNU AFFERO |
||||
|
# GENERAL PUBLIC LICENSE (AGPL v3), Version 3. |
||||
|
# |
||||
|
# This program is distributed in the hope that it will be useful, |
||||
|
# but WITHOUT ANY WARRANTY; without even the implied warranty of |
||||
|
# MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the |
||||
|
# GNU AFFERO GENERAL PUBLIC LICENSE (AGPL v3) for more details. |
||||
|
# |
||||
|
# You should have received a copy of the GNU AFFERO GENERAL PUBLIC LICENSE |
||||
|
# (AGPL v3) along with this program. |
||||
|
# If not, see <http://www.gnu.org/licenses/>. |
||||
|
# |
||||
|
############################################################################# |
||||
|
import requests |
||||
|
from odoo import api, fields, models |
||||
|
|
||||
|
|
||||
|
class ResConfigSettings(models.TransientModel): |
||||
|
_inherit = 'res.config.settings' |
||||
|
|
||||
|
generative_ai_systems = fields.Selection([ |
||||
|
('openai', 'Open AI'), |
||||
|
('openrouter', 'OpenRouter') |
||||
|
], string='Generative AI Systems') |
||||
|
api_key = fields.Char('API Key', copy=False) |
||||
|
max_token = fields.Char(string='Maximum tokens', |
||||
|
default=4096, config_parameter='generative_ai.max_token') |
||||
|
model_id = fields.Selection(selection=[ |
||||
|
('gpt-3.5-turbo', 'gpt-3.5-turbo'), |
||||
|
('gpt-4-turbo', 'gpt-4-turbo'), |
||||
|
('gpt-4o', 'gpt-4o'), |
||||
|
('gpt-4o-mini', 'gpt-4o-mini'), |
||||
|
('gpt-4-0613', 'gpt-4-0613'), |
||||
|
]) |
||||
|
openrouter_model_id = fields.Selection(selection='_get_model_selection', |
||||
|
string="AI Model") |
||||
|
|
||||
|
@api.model |
||||
|
def default_get(self, fields): |
||||
|
"""Override default_get to set a default value for 'max_token' field |
||||
|
when it is included in the fields to fetch.""" |
||||
|
res = super(ResConfigSettings, self).default_get(fields) |
||||
|
if 'max_token' in fields: |
||||
|
res['max_token'] = "4096" |
||||
|
return res |
||||
|
|
||||
|
@api.model |
||||
|
def get_values(self): |
||||
|
"""Override get_values to load saved configuration parameters from the system settings. |
||||
|
These values are shown on the settings UI.""" |
||||
|
res = super(ResConfigSettings, self).get_values() |
||||
|
res['generative_ai_systems'] = self.env['ir.config_parameter'].sudo().get_param( |
||||
|
'generative_ai_systems') |
||||
|
res['api_key'] = self.env['ir.config_parameter'].sudo().get_param('api_key') |
||||
|
res['model_id'] = self.env['ir.config_parameter'].sudo().get_param('model_id') |
||||
|
res['openrouter_model_id'] = self.env['ir.config_parameter'].sudo().get_param( |
||||
|
'openrouter_model_id') |
||||
|
res['max_token'] = self.env['ir.config_parameter'].sudo().get_param('max_token') |
||||
|
return res |
||||
|
|
||||
|
@api.onchange('generative_ai_systems') |
||||
|
def _onchange_generative_ai_systems(self): |
||||
|
"""Clear model selection when system or API key changes""" |
||||
|
if not self.generative_ai_systems or not self.api_key: |
||||
|
self.model_id = False |
||||
|
self.openrouter_model_id = False |
||||
|
|
||||
|
def _get_model_selection(self): |
||||
|
"""Return list of tuples for model selection""" |
||||
|
try: |
||||
|
config_system = self.env['ir.config_parameter'].sudo().get_param( |
||||
|
'generative_ai_systems') |
||||
|
config_key = self.env['ir.config_parameter'].sudo().get_param('api_key') |
||||
|
ai_system = self.generative_ai_systems or config_system |
||||
|
api_key = self.api_key or config_key |
||||
|
if ai_system and api_key: |
||||
|
if ai_system == 'openrouter': |
||||
|
url = "https://openrouter.ai/api/v1/models" |
||||
|
# Required headers for OpenRouter API |
||||
|
headers = { |
||||
|
'Authorization': f'Bearer {api_key}', |
||||
|
'HTTP-Referer': self.env['ir.config_parameter'].sudo().get_param( |
||||
|
'web.base.url', ''), |
||||
|
'X-Title': 'Odoo Integration' |
||||
|
} |
||||
|
response = requests.get(url, headers=headers, timeout=10) |
||||
|
if response.status_code == 200: |
||||
|
models = response.json().get('data', |
||||
|
[]) # OpenRouter returns models in 'data' field |
||||
|
if models: |
||||
|
model_list = [(str(model['id']), str(model['name'])) for model |
||||
|
in models] |
||||
|
return model_list |
||||
|
else: |
||||
|
return [('none', 'No Models Available')] |
||||
|
else: |
||||
|
return [('none', f'API Error: {response.status_code}')] |
||||
|
except requests.exceptions.RequestException: |
||||
|
return [('none', 'Connection Error')] |
||||
|
except Exception: |
||||
|
return [('none', 'Error Loading Models')] |
||||
|
return [('none', 'No Models Available')] |
||||
|
|
||||
|
def set_values(self): |
||||
|
"""Save settings and fetch models""" |
||||
|
super(ResConfigSettings, self).set_values() |
||||
|
self.env['ir.config_parameter'].sudo().set_param('generative_ai_systems', |
||||
|
self.generative_ai_systems) |
||||
|
self.env['ir.config_parameter'].sudo().set_param('api_key', self.api_key) |
||||
|
self.env['ir.config_parameter'].sudo().set_param('max_token', self.max_token) |
||||
|
if self.generative_ai_systems == 'openrouter': |
||||
|
self.env['ir.config_parameter'].sudo().set_param('openrouter_model_id', |
||||
|
self.openrouter_model_id) |
||||
|
self.env['ir.config_parameter'].sudo().set_param('model_id', |
||||
|
'') |
||||
|
else: |
||||
|
self.env['ir.config_parameter'].sudo().set_param('model_id', self.model_id) |
||||
|
if self.generative_ai_systems and self.api_key: |
||||
|
models = self._get_model_selection() |
||||
|
if models and models != [('none', 'No Models Available')]: |
||||
|
# Only save model_id if it's in the list of available models |
||||
|
if self.openrouter_model_id and any( |
||||
|
self.openrouter_model_id == model[0] for model in models): |
||||
|
self.env['ir.config_parameter'].sudo().set_param( |
||||
|
'openrouter_model_id', self.openrouter_model_id) |
||||
|
else: |
||||
|
# If current model_id is not in available models, set to first available model |
||||
|
self.env['ir.config_parameter'].sudo().set_param( |
||||
|
'openrouter_model_id', models[0][0]) |
||||
|
self.openrouter_model_id = models[0][0] |
||||
|
else: |
||||
|
self.env['ir.config_parameter'].sudo().set_param('openrouter_model_id', '') |
||||
|
self.openrouter_model_id = False |
||||
@ -0,0 +1,37 @@ |
|||||
|
# -*- coding: utf-8 -*- |
||||
|
############################################################################# |
||||
|
# |
||||
|
# Cybrosys Technologies Pvt. Ltd. |
||||
|
# |
||||
|
# Copyright (C) 2025-TODAY Cybrosys Technologies(<https://www.cybrosys.com>). |
||||
|
# Author: Cybrosys Techno Solutions(<https://www.cybrosys.com>) |
||||
|
# |
||||
|
# You can modify it under the terms of the GNU AFFERO |
||||
|
# GENERAL PUBLIC LICENSE (AGPL v3), Version 3. |
||||
|
# |
||||
|
# This program is distributed in the hope that it will be useful, |
||||
|
# but WITHOUT ANY WARRANTY; without even the implied warranty of |
||||
|
# MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the |
||||
|
# GNU AFFERO GENERAL PUBLIC LICENSE (AGPL v3) for more details. |
||||
|
# |
||||
|
# You should have received a copy of the GNU AFFERO GENERAL PUBLIC LICENSE |
||||
|
# (AGPL v3) along with this program. |
||||
|
# If not, see <http://www.gnu.org/licenses/>. |
||||
|
# |
||||
|
############################################################################# |
||||
|
from markupsafe import Markup |
||||
|
from odoo import fields, models |
||||
|
|
||||
|
|
||||
|
class WebsiteSnippetData(models.Model): |
||||
|
_name = 'website.snippet.data' |
||||
|
_description = 'AI Generated Website Snippet' |
||||
|
|
||||
|
name = fields.Char(string="Snippet Name", required=True) |
||||
|
content = fields.Text(string="Snippet Content", required=True) |
||||
|
image_url = fields.Char(string="Image URL") |
||||
|
create_date = fields.Datetime(string="Created Date", readonly=True) |
||||
|
is_ai_generated = fields.Boolean(string="AI Generated") |
||||
|
|
||||
|
def get_content(self): |
||||
|
return Markup(self.content) |
||||
|
|
After Width: | Height: | Size: 2.2 KiB |
|
After Width: | Height: | Size: 28 KiB |
|
After Width: | Height: | Size: 628 KiB |
|
After Width: | Height: | Size: 1.1 KiB |
|
After Width: | Height: | Size: 210 KiB |
|
After Width: | Height: | Size: 209 KiB |
|
After Width: | Height: | Size: 109 KiB |
|
After Width: | Height: | Size: 495 B |
|
After Width: | Height: | Size: 1.0 KiB |
|
After Width: | Height: | Size: 624 B |
|
After Width: | Height: | Size: 136 KiB |
|
After Width: | Height: | Size: 214 KiB |
|
After Width: | Height: | Size: 36 KiB |
|
After Width: | Height: | Size: 3.6 KiB |
|
After Width: | Height: | Size: 310 B |
|
After Width: | Height: | Size: 929 B |
|
After Width: | Height: | Size: 1.3 KiB |
|
After Width: | Height: | Size: 3.3 KiB |
|
After Width: | Height: | Size: 1.4 KiB |
|
After Width: | Height: | Size: 17 KiB |
|
After Width: | Height: | Size: 542 B |
|
After Width: | Height: | Size: 576 B |
|
After Width: | Height: | Size: 733 B |
|
After Width: | Height: | Size: 4.3 KiB |
|
After Width: | Height: | Size: 1.2 KiB |
|
After Width: | Height: | Size: 4.0 KiB |
|
After Width: | Height: | Size: 1.7 KiB |
|
After Width: | Height: | Size: 383 KiB |
|
After Width: | Height: | Size: 2.2 KiB |
|
After Width: | Height: | Size: 911 B |
|
After Width: | Height: | Size: 1.1 KiB |
|
After Width: | Height: | Size: 1.2 KiB |
|
After Width: | Height: | Size: 1.2 KiB |
|
After Width: | Height: | Size: 600 B |
|
After Width: | Height: | Size: 673 B |
|
After Width: | Height: | Size: 2.0 KiB |
|
After Width: | Height: | Size: 462 B |
|
After Width: | Height: | Size: 2.1 KiB |
|
After Width: | Height: | Size: 926 B |
|
After Width: | Height: | Size: 9.0 KiB |
|
After Width: | Height: | Size: 23 KiB |
|
After Width: | Height: | Size: 7.0 KiB |
|
After Width: | Height: | Size: 878 B |
|
After Width: | Height: | Size: 1.2 KiB |
|
After Width: | Height: | Size: 653 B |
|
After Width: | Height: | Size: 800 B |
|
After Width: | Height: | Size: 905 B |
|
After Width: | Height: | Size: 189 KiB |
|
After Width: | Height: | Size: 4.3 KiB |
|
After Width: | Height: | Size: 839 B |
|
After Width: | Height: | Size: 1.7 KiB |
|
After Width: | Height: | Size: 5.9 KiB |
|
After Width: | Height: | Size: 1.6 KiB |
|
After Width: | Height: | Size: 34 KiB |
|
After Width: | Height: | Size: 26 KiB |
|
After Width: | Height: | Size: 3.8 KiB |
|
After Width: | Height: | Size: 23 KiB |
|
After Width: | Height: | Size: 1.9 KiB |
|
After Width: | Height: | Size: 2.3 KiB |
|
After Width: | Height: | Size: 427 B |
|
After Width: | Height: | Size: 627 B |
|
After Width: | Height: | Size: 1.1 KiB |
|
After Width: | Height: | Size: 1.2 KiB |
|
After Width: | Height: | Size: 988 B |
|
After Width: | Height: | Size: 3.7 KiB |
|
After Width: | Height: | Size: 5.0 KiB |
|
After Width: | Height: | Size: 875 B |
|
After Width: | Height: | Size: 1.2 KiB |
|
After Width: | Height: | Size: 1.0 MiB |
|
After Width: | Height: | Size: 89 KiB |
|
After Width: | Height: | Size: 544 KiB |
|
After Width: | Height: | Size: 1.0 MiB |
|
After Width: | Height: | Size: 94 KiB |
|
After Width: | Height: | Size: 91 KiB |
|
After Width: | Height: | Size: 176 KiB |
|
After Width: | Height: | Size: 486 KiB |
|
After Width: | Height: | Size: 529 KiB |
|
After Width: | Height: | Size: 240 KiB |
|
After Width: | Height: | Size: 202 KiB |
|
After Width: | Height: | Size: 216 KiB |
|
After Width: | Height: | Size: 880 KiB |
|
After Width: | Height: | Size: 728 KiB |
|
After Width: | Height: | Size: 372 KiB |
|
After Width: | Height: | Size: 44 KiB |
@ -0,0 +1,857 @@ |
|||||
|
<!DOCTYPE html> |
||||
|
<html lang="en"> |
||||
|
<head> |
||||
|
<meta charset="UTF-8"/> |
||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"/> |
||||
|
<title>Generative AI</title> |
||||
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" |
||||
|
rel="stylesheet"/> |
||||
|
<link rel="preconnect" href="https://fonts.googleapis.com"> |
||||
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> |
||||
|
<link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap" |
||||
|
rel="stylesheet"> |
||||
|
<link rel="stylesheet" |
||||
|
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css"/> |
||||
|
<link rel="stylesheet" |
||||
|
href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css"/> |
||||
|
<style> |
||||
|
:root { |
||||
|
--primary-color: #7f54b3; |
||||
|
--bg-white: #fff; |
||||
|
--text-color: #121212; |
||||
|
--text-color-light: #64728f; |
||||
|
} |
||||
|
|
||||
|
body { |
||||
|
font-family: "Montserrat", sans-serif; |
||||
|
} |
||||
|
|
||||
|
.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active { |
||||
|
color: #121212; |
||||
|
font-family: Montserrat; |
||||
|
font-size: 16px !important; |
||||
|
font-weight: 500 !important; |
||||
|
border-radius: 30px; |
||||
|
line-height: normal; |
||||
|
text-transform: capitalize; |
||||
|
background-color: #F5F5F5; |
||||
|
border: none; |
||||
|
margin-bottom: 0; |
||||
|
padding: 12px 24px; |
||||
|
} |
||||
|
|
||||
|
.nav-tabs .nav-link:focus, .nav-tabs .nav-link:hover { |
||||
|
border-color: transparent; |
||||
|
isolation: isolate; |
||||
|
} |
||||
|
|
||||
|
.nav-tabs .nav-link:focus-visible { |
||||
|
border-color: transparent; |
||||
|
box-shadow: none; |
||||
|
} |
||||
|
|
||||
|
/* owl-carosel */ |
||||
|
.owl-carousel .owl-nav { |
||||
|
position: absolute; |
||||
|
top: 42%; |
||||
|
width: 100%; |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
transform: translateY(-42%); |
||||
|
} |
||||
|
|
||||
|
.owl-carousel .owl-nav button.owl-prev { |
||||
|
position: absolute; |
||||
|
right: -36px; |
||||
|
font-size: 28px; |
||||
|
background-color: #e4e4e4; |
||||
|
border-radius: 20px; |
||||
|
width: 40px; |
||||
|
height: 40px; |
||||
|
display: flex; |
||||
|
justify-content: center; |
||||
|
align-items: center; |
||||
|
} |
||||
|
|
||||
|
.owl-carousel .owl-nav button.owl-next { |
||||
|
position: absolute; |
||||
|
left: -36px; |
||||
|
font-size: 28px; |
||||
|
background-color: #e4e4e4; |
||||
|
border-radius: 20px; |
||||
|
width: 40px; |
||||
|
height: 40px; |
||||
|
display: flex; |
||||
|
justify-content: center; |
||||
|
align-items: center; |
||||
|
|
||||
|
} |
||||
|
|
||||
|
</style> |
||||
|
</head> |
||||
|
<body> |
||||
|
<!-- overview --> |
||||
|
<div class="container"> |
||||
|
<div class="my-5"> |
||||
|
<!-- button tab --> |
||||
|
<!-- --> |
||||
|
<!-- version support --> |
||||
|
<div class="my-3 d-flex align-items-center justify-content-end"> |
||||
|
<div class="text-center" |
||||
|
style="background-color:#017E84 !important; font-size:0.8rem !important; color:#fff !important; font-weight:500 !important; padding:4px !important; margin:0 3px !important; border-radius:50px !important; min-width:120px !important"> |
||||
|
Community |
||||
|
</div> |
||||
|
<div class="text-center" |
||||
|
style="background-color:#875A7B !important; color:#fff !important; font-size:0.8rem !important; font-weight:500 !important; padding:4px !important; margin:0 3px !important; border-radius:50px !important; min-width:120px !important"> |
||||
|
Enterprise |
||||
|
</div> |
||||
|
<div class="text-center" |
||||
|
style="background-color:#7C7BAD !important; color:#fff !important; font-size:0.8rem !important; font-weight:500 !important; padding:4px !important; margin:0 3px !important; border-radius:50px !important; min-width:120px !important"> |
||||
|
Odoo.sh |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="tab-content" id="myTabContent"> |
||||
|
<!-- description --> |
||||
|
<div class="tab-pane fade show active" id="home" role="tabpanel" |
||||
|
aria-labelledby="home-tab"> |
||||
|
<div class="position-relative" |
||||
|
style="border-radius: 16px; background: #f8f8f8; padding: 20px 0;"> |
||||
|
<div class="row " style=" |
||||
|
padding: 2rem 0rem 0 !important; |
||||
|
"> |
||||
|
<div class="col-lg-8 mx-auto gap-4 d-flex flex-column align-items-center"> |
||||
|
<p class="my-1 text-center text-uppercase" |
||||
|
style=" |
||||
|
letter-spacing: 4px !important; |
||||
|
color: #7f54b3; |
||||
|
font-weight: bold; |
||||
|
text-align: center; |
||||
|
font-size: 14px; |
||||
|
font-weight: 600; |
||||
|
line-height: 15.96px; |
||||
|
text-transform: uppercase; |
||||
|
"> |
||||
|
Generates responsive website snippets from text prompts using AI. |
||||
|
</p> |
||||
|
<h1 class="text-center text-uppercase my-0" |
||||
|
style=" |
||||
|
color: #121212; |
||||
|
font-size: 46px; |
||||
|
font-weight: 700; |
||||
|
line-height: normal; |
||||
|
">Generative AI</span> |
||||
|
</h1> |
||||
|
</div> |
||||
|
<div class="col-lg-12 d-flex justify-content-center align-items-center" |
||||
|
style="margin: 3rem 0;"> |
||||
|
<img src="./assets/icons/brand-pair.svg" |
||||
|
width="100%" |
||||
|
height="auto" |
||||
|
style="width: 50%" |
||||
|
class="img-responsive"/> |
||||
|
</div> |
||||
|
<div class="col-md-12 text-center"> |
||||
|
<a href="mailto:odoo@cybrosys.com" |
||||
|
target="_blank" |
||||
|
style="background-color: transparent;border-radius: 35px; |
||||
|
font-family: Montserrat; |
||||
|
display: inline-block; |
||||
|
padding: 7px 33px; |
||||
|
border: 1px solid #7f54b3; |
||||
|
color: #7f54b3; |
||||
|
text-decoration: none; |
||||
|
" |
||||
|
class="mx-1 mb-2 deep-1 deep_hover"> |
||||
|
<img class="img" |
||||
|
style="width: 24px" |
||||
|
src="./assets/icons/mail.svg"/> |
||||
|
<span |
||||
|
class="pl-2" |
||||
|
style=" font-size: 16px; vertical-align: middle" |
||||
|
>Email Us</span |
||||
|
> |
||||
|
</a> |
||||
|
<a href="skype:cybroopenerp?chat" |
||||
|
target="_blank" |
||||
|
style=" |
||||
|
background-color: #7f289b; |
||||
|
font-family: Montserrat; |
||||
|
display: inline-block; |
||||
|
padding: 7px 33px; |
||||
|
border: 1px solid #7f289b; |
||||
|
border-radius: 35px; |
||||
|
text-decoration: none; |
||||
|
" |
||||
|
class="mx-1 mb-2 deep-1 deep_hover"> |
||||
|
<img |
||||
|
class="img" |
||||
|
style="width: 24px" |
||||
|
src="./assets/icons/skype-fill.svg" |
||||
|
/> |
||||
|
<span |
||||
|
class="pl-2" |
||||
|
style="color: #fff; font-size: 16px; vertical-align: middle" |
||||
|
>Skype Us</span |
||||
|
> |
||||
|
</a> |
||||
|
</div> |
||||
|
<!-- <div class="d-flex justify-content-center mt-2">--> |
||||
|
<!-- <img src="./assets/icons/hero.gif"--> |
||||
|
<!-- class="w-100"--> |
||||
|
<!-- style="z-index: 3; height: auto;">--> |
||||
|
<!-- </div>--> |
||||
|
</div> |
||||
|
<div class="position-absolute bottom-0" |
||||
|
style="z-index: 1; width: 100%;"> |
||||
|
<img src="./assets/icons/banner-bg.svg" |
||||
|
class="img-fluid w-100"> |
||||
|
</div> |
||||
|
<div class="position-absolute bottom-0 end-0" |
||||
|
style=" z-index: 2;"> |
||||
|
<img src="./assets/icons/patter.svg"> |
||||
|
</div> |
||||
|
</div> |
||||
|
<!-- key-highlight --> |
||||
|
<div class="" style="border-radius: 16px; |
||||
|
padding: 60px 40px; |
||||
|
border: 1px solid #EBEEF2; |
||||
|
background: #F5F5F7; |
||||
|
box-shadow: 0px 5px 20px -11px rgba(0, 0, 0, 0.25); "> |
||||
|
<div class="row"> |
||||
|
<div class="col-lg-12 d-flex flex-column justify-content-center align-items-center"> |
||||
|
<h2 style=" color: #121212; |
||||
|
text-align: center; |
||||
|
font-size: 40px; |
||||
|
font-weight: 700; |
||||
|
text-transform: uppercase; padding-bottom: 50px;">Key |
||||
|
Highlights</h2> |
||||
|
</div> |
||||
|
<div class="col-lg-4"> |
||||
|
<div class="mb-4 d-flex flex-column justify-content-center gap-3" |
||||
|
style="border-radius: 12px; border: 1px solid #B6BCCD; |
||||
|
background: #FFF;padding:32px "> |
||||
|
<div class="d-flex justify-content-center align-items-center" |
||||
|
style="background-color:#7847D9 !important; border-radius:8px !important; height:42px; width:42px"> |
||||
|
<img src="./assets/icons/feature-icon.svg" |
||||
|
class="img-responsive" height="26px" |
||||
|
width="26px"> |
||||
|
</div> |
||||
|
<h5 class="m-0" |
||||
|
style="color:#000 !important; font-weight:bold"> |
||||
|
Easy to set up. |
||||
|
</h5> |
||||
|
<p class="m-0" |
||||
|
style="font-size:0.9rem; color:#64728f; font-size: 16px; font-weight: 400;"> |
||||
|
</p> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="col-lg-4"> |
||||
|
<div class="mb-4 d-flex flex-column justify-content-center gap-3" |
||||
|
style="border-radius: 12px; |
||||
|
border: 1px solid #B6BCCD; |
||||
|
background: #FFF;padding:32px "> |
||||
|
<div class="d-flex justify-content-center align-items-center" |
||||
|
style="background-color:#7847D9 !important; border-radius:8px !important; height:42px; width:42px"> |
||||
|
<img src="./assets/icons/feature-icon.svg" |
||||
|
class="img-responsive" height="26px" |
||||
|
width="26px"> |
||||
|
</div> |
||||
|
<h5 class="m-0" |
||||
|
style="color:#000 !important; font-weight:bold"> |
||||
|
AI-powered snippet creation. |
||||
|
</h5> |
||||
|
<p class="m-0" |
||||
|
style="font-size:0.9rem; color:#64728f; font-size: 16px; font-weight: 400;"> |
||||
|
</p> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="col-lg-4"> |
||||
|
<div class="mb-4 d-flex flex-column justify-content-center gap-3" |
||||
|
style="border-radius: 12px; |
||||
|
border: 1px solid #B6BCCD; |
||||
|
background: #FFF;padding:32px "> |
||||
|
<div class="d-flex justify-content-center align-items-center" |
||||
|
style="background-color:#7847D9 !important; border-radius:8px !important; height:42px; width:42px"> |
||||
|
<img src="./assets/icons/feature-icon.svg" |
||||
|
class="img-responsive" height="26px" |
||||
|
width="26px"> |
||||
|
</div> |
||||
|
<h5 class="m-0" |
||||
|
style="color:#000 !important; font-weight:bold"> |
||||
|
Unique preview & styling. |
||||
|
</h5> |
||||
|
<p class="m-0" |
||||
|
style="font-size:0.9rem; color:#64728f; font-size: 16px; font-weight: 400;"> |
||||
|
|
||||
|
</p> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
</div> |
||||
|
</div> |
||||
|
<!--code --> |
||||
|
<div class="my-5"> |
||||
|
<div class="position-relative" style=" padding: 5rem 4rem 5rem 4rem; background-color: #0A1425; border-radius: 12px;"> |
||||
|
<div class="d-flex flex-column gap-4"> |
||||
|
<span class="wrapper-subtitle" |
||||
|
style="font-size: 40px; font-weight: 700; color: #fff;line-height: 60px; text-transform: capitalize; width: 450px; font-family: Montserrat;">Generative AI</span> |
||||
|
<h3 class="wrapper-details" |
||||
|
style="font-size: 20px; font-weight: 400; color: #fff; line-height: 32px; "> |
||||
|
Are you ready to make your business more |
||||
|
organized? |
||||
|
<br> Improve now! |
||||
|
</h3> |
||||
|
<div class="d-flex gap-3"> |
||||
|
<a href="mailto:odoo@cybrosys.com" |
||||
|
class="shop-btn" style="cursor: pointer; border-radius: 16px; display: flex; justify-content: center; align-items: center; gap: 7px; |
||||
|
border: 1px solid #ffffff33; |
||||
|
background-color: #ffffff14; |
||||
|
backdrop-filter: blur(10px); color: #fff; padding: 12px 16px 12px 16px; text-decoration: none;"> |
||||
|
<span style="border-radius: 12px; |
||||
|
background-color: #ffffff1a; |
||||
|
backdrop-filter: blur(6px);padding: 12px; "> |
||||
|
<img src="./assets/icons/banner-mail.svg"> |
||||
|
</span> |
||||
|
<span style="font-weight: 500;font-family: Montserrat;">odoo@cybrosys.com</span> |
||||
|
</a> |
||||
|
<a href="tel:+91 9074270811" class="shop-btn" |
||||
|
style="cursor: pointer; border-radius: 16px; display: flex; justify-content: center; align-items: center; gap: 7px; |
||||
|
border: 1px solid #ffffff33; |
||||
|
background-color: #ffffff14; |
||||
|
backdrop-filter: blur(10px); color: #fff; padding: 12px 22px 12px 18px; text-decoration: none;"> |
||||
|
<span style="border-radius: 12px; |
||||
|
background-color: #ffffff1a; |
||||
|
backdrop-filter: blur(6px);padding: 12px;"> |
||||
|
<img src="./assets/icons/banner-call.svg"> |
||||
|
</span> |
||||
|
<span style="font-weight: 500;font-family: Montserrat;">+91 9074270811</span> |
||||
|
</a> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="position-absolute bottom-0 end-0"> |
||||
|
<img src="./assets/icons/banner-pattern.svg" |
||||
|
style="width: 540px;"> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<!-- end-code --> |
||||
|
<!-- --> |
||||
|
<!-- screenshot and other --> |
||||
|
|
||||
|
<div class="mb-4 bg-white" |
||||
|
style=" border: 1px solid #EBEEF2; border-radius: 6px; box-shadow: 0px 8px 20px -4px rgba(0, 0, 0, 0.10); border: 1px solid #EBEEF2;"> |
||||
|
<div> |
||||
|
<ul class="nav nav-tabs justify-content-center bg-white py-2" |
||||
|
id="myTab" role="tablist" |
||||
|
style="border-radius: 6px 6px 0 0;"> |
||||
|
<li class="nav-item"> |
||||
|
<a aria-controls="overview" |
||||
|
aria-bs-selected="true" |
||||
|
class="nav-link active" data-bs-toggle="tab" |
||||
|
href="#overview" id="overview-tab" role="tab" |
||||
|
style="color:#121212; font-weight:500; font-size:16px"> |
||||
|
Screenshots</a> |
||||
|
</li> |
||||
|
<li class="nav-item"> |
||||
|
<a aria-controls="feature" |
||||
|
aria-bs-selected="false" |
||||
|
class="nav-link py-2" data-bs-toggle="tab" |
||||
|
href="#feature" id="feature-tab" role="tab" |
||||
|
style="color:#121212; font-weight:500; font-size:16px">Features</a> |
||||
|
</li> |
||||
|
</ul> |
||||
|
</div> |
||||
|
<div class="tab-content p-md-5 p-2 py-3" id="myTabContent"> |
||||
|
<div aria-labelledby="overview-tab" |
||||
|
class="tab-pane fade show active" id="overview" |
||||
|
role="tabpanel"> |
||||
|
<div class="position-relative mb-4" |
||||
|
style="border-radius:10px"> |
||||
|
<img alt="acc_bg" |
||||
|
class="w-100 h-100 position-absolute img-fluid left_0" |
||||
|
loading="lazy" |
||||
|
src="//apps.odoocdn.com/apps/assets/17.0/ks_dashboard_ninja/ai-img/o3.png?007008f" |
||||
|
style=""> |
||||
|
</div> |
||||
|
<!-- screenshots section--> |
||||
|
<div class="position-relative mb-4" |
||||
|
style="border-radius:10px; background-color:#f4f4f4"> |
||||
|
<div class="p-md-5 p-3 position-relative"> |
||||
|
<div class="row"> |
||||
|
<div class="col-md-12"> |
||||
|
<h1 style="font-weight:bold; font-size:calc(1.1rem + 1vw); line-height:120%; text-align:center; text-transform:capitalize; font-size: 40px; |
||||
|
font-weight: 700;"> |
||||
|
<span style="color:#121212; font-size:calc(1.1rem + 1vw)"> Navigate to the |
||||
|
</span> |
||||
|
<span style="color: #7f54b3; font-size:calc(1.1rem + 1vw)">AI tools section.</span> |
||||
|
</h1> |
||||
|
</div> |
||||
|
<div class="col-md-12 mb-4"> |
||||
|
<p style="font-weight:400; font-size:16px; line-height:150%; text-align:center; color:#64728f"> |
||||
|
In Settings → Website → Configuration → AI tools section, |
||||
|
select your AI system (OpenAI or OpenRouter), enter your API key, |
||||
|
set maximum tokens and choose your preferred AI model. |
||||
|
</p> |
||||
|
</div> |
||||
|
<div class="col-md-12 text-center"> |
||||
|
<div class="d-inline-block p-3 shadow-sm" |
||||
|
style="background-color:#fff; border-radius:10px"> |
||||
|
<img alt="" class="img-fluid" |
||||
|
loading="lazy" |
||||
|
src="./assets/screenshots/Screenshot1.png" |
||||
|
style="min-height: 1px;"> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="position-relative mb-4" |
||||
|
style="border-radius:10px; background-color:#f4f4f4"> |
||||
|
<div class="p-md-5 p-3 position-relative"> |
||||
|
<div class="row"> |
||||
|
<div class="col-md-12"> |
||||
|
<h1 style="font-weight:bold; font-size:calc(1.1rem + 1vw); line-height:120%; text-align:center; text-transform:capitalize; font-size: 40px; |
||||
|
font-weight: 700;"> |
||||
|
<span style="color:#121212; font-size:calc(1.1rem + 1vw)">Click |
||||
|
</span> |
||||
|
<span style="color: #7f54b3; font-size:calc(1.1rem + 1vw)"> Edit Button.</span> |
||||
|
</h1> |
||||
|
</div> |
||||
|
<div class="col-md-12 mb-4"> |
||||
|
<p style="font-weight:400; font-size:16px; line-height:150%; text-align:center; color:#64728f"> |
||||
|
Click the “Edit” button to open the Website Editor Sidebar. |
||||
|
|
||||
|
</p> |
||||
|
</div> |
||||
|
<div class="col-md-12 text-center"> |
||||
|
<div class="d-inline-block p-3 shadow-sm" |
||||
|
style="background-color:#fff; border-radius:10px"> |
||||
|
<img alt="" class="img-fluid" |
||||
|
loading="lazy" |
||||
|
src="./assets/screenshots/Screenshot2.png" |
||||
|
style="min-height: 1px;"> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="position-relative mb-4" |
||||
|
style="border-radius:10px; background-color:#f4f4f4"> |
||||
|
<div class="p-md-5 p-3 position-relative"> |
||||
|
<div class="row"> |
||||
|
<div class="col-md-12"> |
||||
|
<h1 style="font-weight:bold; font-size:calc(1.1rem + 1vw); line-height:120%; text-align:center; text-transform:capitalize; font-size: 40px; |
||||
|
font-weight: 700;"> |
||||
|
<span style="color:#121212; font-size:calc(1.1rem + 1vw)">Open |
||||
|
</span> |
||||
|
<span style="color: #7f54b3; font-size:calc(1.1rem + 1vw)">Add Snippet Dialog. </span> |
||||
|
</h1> |
||||
|
</div> |
||||
|
<div class="col-md-12 mb-4"> |
||||
|
<p style="font-weight:400; font-size:16px; line-height:150%; text-align:center; color:#64728f"> |
||||
|
Click AI Generated to view the Add Snippet Dialog. |
||||
|
</p> |
||||
|
</div> |
||||
|
<div class="col-md-12 text-center"> |
||||
|
<div class="d-inline-block p-3 shadow-sm" |
||||
|
style="background-color:#fff; border-radius:10px"> |
||||
|
<img alt="" class="img-fluid" |
||||
|
loading="lazy" |
||||
|
src="./assets/screenshots/Screenshot3.png" |
||||
|
style="min-height: 1px;"> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="position-relative mb-4" |
||||
|
style="border-radius:10px; background-color:#f4f4f4"> |
||||
|
<div class="p-md-5 p-3 position-relative"> |
||||
|
<div class="row"> |
||||
|
<div class="col-md-12"> |
||||
|
<h1 style="font-weight:bold; font-size:calc(1.1rem + 1vw); line-height:120%; text-align:center; text-transform:capitalize; font-size: 40px; |
||||
|
font-weight: 700;"> |
||||
|
<span style="color:#121212; font-size:calc(1.1rem + 1vw)">Click |
||||
|
|
||||
|
</span> |
||||
|
<span style="color:#7f54b3; font-size:calc(1.1rem + 1vw)">Generate with AI.</span> |
||||
|
</h1> |
||||
|
</div> |
||||
|
<div class="col-md-12 mb-4"> |
||||
|
<p style="font-weight:400; font-size:16px; line-height:150%; text-align:center; color:#64728f"> |
||||
|
Click Generate with AI to open the Generate Snippet with AI dialog box. |
||||
|
</p> |
||||
|
</div> |
||||
|
<div class="col-md-12 text-center"> |
||||
|
<div class="d-inline-block p-3 shadow-sm" |
||||
|
style="background-color:#fff; border-radius:10px"> |
||||
|
<img alt="" class="img-fluid" |
||||
|
loading="lazy" |
||||
|
src="./assets/screenshots/Screenshot4.png" |
||||
|
style="min-height: 1px;"> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="position-relative mb-4" |
||||
|
style="border-radius:10px; background-color:#f4f4f4"> |
||||
|
<div class="p-md-5 p-3 position-relative"> |
||||
|
<div class="row"> |
||||
|
<div class="col-md-12"> |
||||
|
<h1 style="font-weight:bold; font-size:calc(1.1rem + 1vw); line-height:120%; text-align:center; text-transform:capitalize; font-size: 40px; |
||||
|
font-weight: 700;"> |
||||
|
<span style="color:#121212; font-size:calc(1.1rem + 1vw)">Generate |
||||
|
|
||||
|
</span> |
||||
|
<span style="color:#7f54b3; font-size:calc(1.1rem + 1vw)">Snippet.</span> |
||||
|
</h1> |
||||
|
</div> |
||||
|
<div class="col-md-12 mb-4"> |
||||
|
<p style="font-weight:400; font-size:16px; line-height:150%; text-align:center; color:#64728f"> |
||||
|
Enter the snippet name and prompt, and click Generate. |
||||
|
</p> |
||||
|
</div> |
||||
|
<div class="col-md-12 text-center"> |
||||
|
<div class="d-inline-block p-3 shadow-sm" |
||||
|
style="background-color:#fff; border-radius:10px"> |
||||
|
<img alt="" class="img-fluid" |
||||
|
loading="lazy" |
||||
|
src="./assets/screenshots/Screenshot5.png" |
||||
|
style="min-height: 1px;"> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="col-md-12 mb-4 pt-5"> |
||||
|
<p style="font-weight:400; font-size:16px; line-height:150%; text-align:center; color:#64728f"> |
||||
|
You can view the newly created snippet in the Add Snippet dialog box. |
||||
|
</p> |
||||
|
</div> |
||||
|
<div class="col-md-12 text-center"> |
||||
|
<div class="d-inline-block p-3 shadow-sm" |
||||
|
style="background-color:#fff; border-radius:10px"> |
||||
|
<img alt="" class="img-fluid" |
||||
|
loading="lazy" |
||||
|
src="./assets/screenshots/Screenshot6.png" |
||||
|
style="min-height: 1px;"> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div aria-labelledby="feature-tab" |
||||
|
class="tab-pane fade show py-1" id="feature" |
||||
|
role="tabpanel"> |
||||
|
<div class="row py-4"> |
||||
|
<!-- Features Section --> |
||||
|
<div class="col-md-6 col-sm-12 p-3"> |
||||
|
<div class="d-flex flex-column align-items-start h-100" |
||||
|
style="padding:30px; border-radius:12px; background-color:#faf8ff"> |
||||
|
<div class="d-flex align-items-center justify-content-center"> |
||||
|
<div class="d-flex align-items-center justify-content-center " |
||||
|
style="width:36px; height:36px; border-radius:50%; background-color:#7847D9 ; margin-right:10px"> |
||||
|
<i class="fa fa-star " |
||||
|
style="color:#fff; font-size:14px"></i> |
||||
|
</div> |
||||
|
<p style="color:#1A202C; font-weight:600; font-size:1.2rem; margin-bottom:2px"> |
||||
|
Instantly generate custom website snippets from text prompts using |
||||
|
OpenAI or OpenRouter. |
||||
|
</p> |
||||
|
</div> |
||||
|
|
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="col-md-6 col-sm-12 p-3"> |
||||
|
<div class="d-flex flex-column align-items-start h-100" |
||||
|
style="padding:30px; border-radius:12px; background-color:#faf8ff"> |
||||
|
<div class="d-flex align-items-center justify-content-center"> |
||||
|
<div class="d-flex align-items-center justify-content-center " |
||||
|
style="width:36px; height:36px; border-radius:50%; background-color:#7847D9 ; margin-right:10px"> |
||||
|
<i class="fa fa-star " |
||||
|
style="color:#fff; font-size:14px"></i> |
||||
|
</div> |
||||
|
<p style="color:#1A202C; font-weight:600; font-size:1.2rem; margin-bottom:2px"> |
||||
|
Create, preview, and insert AI-generated snippets directly within |
||||
|
Odoo’s website editor. |
||||
|
</p> |
||||
|
</div> |
||||
|
|
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<!-- --> |
||||
|
<!-- related post --> |
||||
|
<!-- --> |
||||
|
<section class="oe_container mt32"> |
||||
|
<h2 style="color: #091E42;font-family: "Montserrat";text-align: center;margin: 25px auto;text-transform: uppercase;" class="oe_slogan"> |
||||
|
<b>Related Products</b> |
||||
|
</h2> |
||||
|
<div id="demo" class="row carousel slide mt64 mb32" data-bs-ride="carousel"> |
||||
|
<!-- The slideshow --> |
||||
|
<div class="carousel-inner"> |
||||
|
<div class="carousel-item active"> |
||||
|
<div class="col-xs-12 col-sm-4 col-md-4 mb16 mt16" style="float: left; padding: 10px;"> |
||||
|
<a href="https://apps.odoo.com/apps/modules/18.0/hide_menu_user" target="_blank" style="color: #000; text-decoration: none;"> |
||||
|
<div style="border-radius: 6px; padding: 16px; border: 1px solid #cbcbcb;" class="shadow-sm"> |
||||
|
<img class="img img-responsive center-block" style=" max-width: 100%;" src="./assets/modules/b1.png" /> |
||||
|
<h4 class="mt0 text-truncate" style="text-align:center;width:100% margin-bottom: 8px; font-weight: 600; padding-top: 16px; text-decoration:none;font-size: 18px; padding-bottom: 8px; margin-bottom: 0px"> |
||||
|
Hide Any Menu User Wise</h4> |
||||
|
</div> |
||||
|
</a> |
||||
|
</div> |
||||
|
<div class="col-xs-12 col-sm-4 col-md-4 mb16 mt16" style="float: left; padding: 10px;"> |
||||
|
<a href="https://apps.odoo.com/apps/modules/18.0/web_login_styles" target="_blank" style="color: #000; text-decoration: none;"> |
||||
|
<div style="border-radius: 6px; padding: 16px; border: 1px solid #cbcbcb;" class="shadow-sm"> |
||||
|
<img class="img img-responsive center-block" style=" max-width: 100%;" src="./assets/modules/b2.png" /> |
||||
|
<h4 class="mt0 text-truncate" style="text-align:center;width:100% margin-bottom: 8px; font-weight: 600; padding-top: 16px; text-decoration:none;font-size: 18px; padding-bottom: 8px; margin-bottom: 0px"> |
||||
|
Customize Login Page Style</h4> |
||||
|
</div> |
||||
|
</a> |
||||
|
</div> |
||||
|
<div class="col-xs-12 col-sm-4 col-md-4 mb16 mt16" style="float: left; padding: 10px;"> |
||||
|
<a href="https://apps.odoo.com/apps/modules/18.0/whatsapp_mail_messaging" target="_blank" style="color: #000; text-decoration: none;"> |
||||
|
<div style="border-radius: 6px;padding: 16px; border: 1px solid #cbcbcb;" class="shadow-sm"> |
||||
|
<img class="img img-responsive center-block" style=" max-width: 100%;" src="./assets/modules/b3.png"/> |
||||
|
<h4 class="mt0 text-truncate" style="text-align:center;width:100% margin-bottom: 8px; font-weight: 600; padding-top: 16px; text-decoration:none;font-size: 18px; padding-bottom: 8px; margin-bottom: 0px"> |
||||
|
Odoo Whatsapp Connector</h4> |
||||
|
</div> |
||||
|
</a> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="carousel-item"> |
||||
|
<div class="col-xs-12 col-sm-4 col-md-4 mb16 mt16" style="float: left; padding: 10px;"> |
||||
|
<a href="https://apps.odoo.com/apps/modules/18.0/login_user_detail" target="_blank" style="color: #000; text-decoration: none;"> |
||||
|
<div style="border-radius: 6px; padding: 16px; border: 1px solid #cbcbcb;" class="shadow-sm"> |
||||
|
<img class="img img-responsive center-block" style=" max-width: 100%;" src="./assets/modules/b4.png" /> |
||||
|
<h4 class="mt0 text-truncate" style="text-align:center;width:100% margin-bottom: 8px; font-weight: 600; padding-top: 16px; text-decoration:none;font-size: 18px; padding-bottom: 8px; margin-bottom: 0px"> |
||||
|
User Log Details</h4> |
||||
|
</div> |
||||
|
</a> |
||||
|
</div> |
||||
|
<div class="col-xs-12 col-sm-4 col-md-4 mb16 mt16" style="float: left; padding: 10px;"> |
||||
|
<a href="https://apps.odoo.com/apps/modules/18.0/report_attachment_preview" target="_blank" style="color: #000; text-decoration: none;"> |
||||
|
<div style="border-radius: 6px; padding: 16px; border: 1px solid #cbcbcb;" class="shadow-sm"> |
||||
|
<img class="img img-responsive center-block" style=" max-width: 100%;" src="./assets/modules/b5.png" /> |
||||
|
<h4 class="mt0 text-truncate" style="text-align:center;width:100% margin-bottom: 8px; font-weight: 600; padding-top: 16px; text-decoration:none;font-size: 18px; padding-bottom: 8px; margin-bottom: 0px"> |
||||
|
Reports and Attachments Preview in Browser</h4> |
||||
|
</div> |
||||
|
</a> |
||||
|
</div> |
||||
|
<div class="col-xs-12 col-sm-4 col-md-4 mb16 mt16" style="float: left; padding: 10px;"> |
||||
|
<a href="https://apps.odoo.com/apps/modules/18.0/project_dashboard_odoo" target="_blank" style="color: #000; text-decoration: none;"> |
||||
|
<div style="border-radius: 6px; padding: 16px; border: 1px solid #cbcbcb;" class="shadow-sm"> |
||||
|
<img class="img img-responsive center-block" style=" max-width: 100%;" src="./assets/modules/b6.png" /> |
||||
|
<h4 class="mt0 text-truncate" style="text-align:center;width:100% margin-bottom: 8px; font-weight: 600; padding-top: 16px; text-decoration:none;font-size: 18px; padding-bottom: 8px; margin-bottom: 0px"> |
||||
|
Project Dashboard</h4> |
||||
|
</div> |
||||
|
</a> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<!-- Left and right controls --> |
||||
|
<a class="carousel-control-prev" href="#demo" data-bs-slide="prev" style="margin-left: -30px;width: 35px;color: #000;"> |
||||
|
<span class="carousel-control-prev-icon"> |
||||
|
<i class="fa fa-chevron-left" style="font-size:24px"></i> |
||||
|
</span> |
||||
|
</a> |
||||
|
<a class="carousel-control-next" href="#demo" data-bs-slide="next" style="margin-right: -30px;width: 35px;color: #000;"> |
||||
|
<span class="carousel-control-next-icon"> |
||||
|
<i class="fa fa-chevron-right" style="font-size:24px"></i> |
||||
|
</span> |
||||
|
</a> |
||||
|
</div> |
||||
|
</section> |
||||
|
<!-- service-section --> |
||||
|
|
||||
|
<section id="services" class="mt-5" style="border-radius: 16px; |
||||
|
border: 1px solid #EBEEF2; |
||||
|
background: var(--Neutral-N0, #FFF); |
||||
|
padding: 60px 40px; |
||||
|
box-shadow: 0px 5px 20px -11px rgba(0, 0, 0, 0.25);"> |
||||
|
<div class="text-center mt-4"><h3 class="mb-0" style="color: #000; |
||||
|
text-align: center; |
||||
|
font-family: Montserrat; |
||||
|
font-size: 40px; |
||||
|
font-style: normal; |
||||
|
font-weight: 700; |
||||
|
line-height: normal; |
||||
|
text-transform: uppercase; |
||||
|
padding-bottom: 50px;"> |
||||
|
Our Services</h3></div> |
||||
|
<div class="row mt-3"> |
||||
|
<div class="col-lg-3 col-sm-12 mb-3"> |
||||
|
<a href="#" style="text-decoration:none"> |
||||
|
<div class="btn-lg btn-block p-4 mb-2 d-flex flex-column justify-content-center align-items-center" |
||||
|
style="font-size:25px; font-weight:bold;background-color:#FFE2E5; margin:auto; gap: 16px; border-radius: 8px;"> |
||||
|
<div class="d-flex justify-content-center align-items-center" |
||||
|
style="background-color:#FA5A7D; border-radius:50%; height:56px; width:56px"> |
||||
|
<img src="./assets/icons/gear.svg" |
||||
|
class="img-responsive" |
||||
|
height="28px" width="28px"> |
||||
|
</div> |
||||
|
<span style="font-size: 18px; |
||||
|
color: var(--text-color); |
||||
|
font-weight: 600;"> Odoo Customization</span> |
||||
|
</div> |
||||
|
</a> |
||||
|
</div> |
||||
|
<div class="col-lg-3 col-sm-12 mb-3"> |
||||
|
<a href="#" style="text-decoration:none"> |
||||
|
<div class="btn-lg btn-block p-4 mb-2 d-flex flex-column justify-content-center align-items-center" |
||||
|
style="font-size:25px; font-weight:bold;background-color:#FFF4DE; margin:auto; gap: 16px; border-radius: 8px;"> |
||||
|
<div class="d-flex justify-content-center align-items-center" |
||||
|
style="background-color:#FF947A; border-radius:50%; height:56px; width:56px"> |
||||
|
<img src="./assets/icons/wrench-icon.svg" |
||||
|
class="img-responsive" |
||||
|
height="28px" width="28px"> |
||||
|
</div> |
||||
|
<span style="font-size: 18px; |
||||
|
color: var(--text-color); |
||||
|
font-weight: 600;"> Odoo Implementation</span> |
||||
|
</div> |
||||
|
</a> |
||||
|
</div> |
||||
|
<div class="col-lg-3 col-sm-12 mb-3"> |
||||
|
<a href="#" style="text-decoration:none"> |
||||
|
<div class="btn-lg btn-block p-4 mb-2 d-flex flex-column justify-content-center align-items-center" |
||||
|
style="font-size:25px; font-weight:bold;background-color:#DCFCE7; margin:auto; gap: 16px; border-radius: 8px;"> |
||||
|
<div class="d-flex justify-content-center align-items-center" |
||||
|
style="background-color:#3CD856; border-radius:50%; height:56px; width:56px"> |
||||
|
<img src="./assets/icons/life-ring-icon.svg" |
||||
|
class="img-responsive" |
||||
|
height="28px" width="28px"> |
||||
|
</div> |
||||
|
<span style="font-size: 18px; |
||||
|
color: var(--text-color); |
||||
|
font-weight: 600;">Odoo Support</span> |
||||
|
</div> |
||||
|
</a> |
||||
|
</div> |
||||
|
<div class="col-lg-3 col-sm-12 mb-3"> |
||||
|
<a href="#" style="text-decoration:none"> |
||||
|
<div class="btn-lg btn-block p-4 mb-2 d-flex flex-column justify-content-center align-items-center" |
||||
|
style="font-size:25px; font-weight:bold;background-color:#F3E8FF; margin:auto; gap: 16px; border-radius: 8px;"> |
||||
|
<div class="d-flex justify-content-center align-items-center" |
||||
|
style="background-color:#BF83FF; border-radius:50%; height:56px; width:56px"> |
||||
|
<img src="./assets/icons/arrows-repeat.svg" |
||||
|
class="img-responsive" |
||||
|
height="28px" width="28px"> |
||||
|
</div> |
||||
|
<span style="font-size: 18px; |
||||
|
color: var(--text-color); |
||||
|
font-weight: 600;">Odoo Migration</span> |
||||
|
</div> |
||||
|
</a> |
||||
|
</div> |
||||
|
<div class="col-lg-3 col-sm-12 mb-3"> |
||||
|
<a href="#" style="text-decoration:none"> |
||||
|
<div class="btn-lg btn-block p-4 mb-2 d-flex flex-column justify-content-center align-items-center" |
||||
|
style="font-size:25px; font-weight:bold;background-color:#F1F9FF; margin:auto; gap: 16px; border-radius: 8px;"> |
||||
|
<div class="d-flex justify-content-center align-items-center" |
||||
|
style="background-color:#01649C; border-radius:50%; height:56px; width:56px"> |
||||
|
<img src="./assets/icons/puzzle-piece-icon.svg" |
||||
|
class="img-responsive" |
||||
|
height="28px" width="28px"> |
||||
|
</div> |
||||
|
<span style="font-size: 18px; |
||||
|
color: var(--text-color); |
||||
|
font-weight: 600;">Odoo integration</span> |
||||
|
</div> |
||||
|
</a> |
||||
|
</div> |
||||
|
<div class="col-lg-3 col-sm-12 mb-3"> |
||||
|
<a href="#" style="text-decoration:none"> |
||||
|
<div class="btn-lg btn-block p-4 mb-2 d-flex flex-column justify-content-center align-items-center" |
||||
|
style="font-size:25px; font-weight:bold;background-color:#EDF8ED; margin:auto; gap: 16px; border-radius: 8px;"> |
||||
|
|
||||
|
<div class="d-flex justify-content-center align-items-center" |
||||
|
style="background-color:#69CC70; border-radius:50%; height:56px; width:56px"> |
||||
|
<img src="./assets/icons/odoo-consultancy.svg" |
||||
|
class="img-responsive" |
||||
|
height="28px" width="28px"> |
||||
|
</div> |
||||
|
<span style="font-size: 18px; |
||||
|
color: var(--text-color); |
||||
|
font-weight: 600;">Odoo Consultancy</span> |
||||
|
</div> |
||||
|
</a> |
||||
|
</div> |
||||
|
<div class="col-lg-3 col-sm-12 mb-3"> |
||||
|
<a href="#" style="text-decoration:none"> |
||||
|
<div class="btn-lg btn-block p-4 mb-2 d-flex flex-column justify-content-center align-items-center" |
||||
|
style="font-size:25px; font-weight:bold;background-color:#F1F6FF; margin:auto; gap: 16px; border-radius: 8px;"> |
||||
|
|
||||
|
<div class="d-flex justify-content-center align-items-center" |
||||
|
style="background-color:#2E4556; border-radius:50%; height:56px; width:56px"> |
||||
|
<img src="./assets/icons/odoo-licencing.svg" |
||||
|
class="img-responsive" |
||||
|
height="28px" width="28px"> |
||||
|
</div> |
||||
|
<span style="font-size: 18px; |
||||
|
color: var(--text-color); |
||||
|
font-weight: 600;">Odoo Licensing</span> |
||||
|
</div> |
||||
|
</a> |
||||
|
</div> |
||||
|
<div class="col-lg-3 col-sm-12 mb-3"> |
||||
|
<a href="#" style="text-decoration:none"> |
||||
|
<div class="btn-lg btn-block p-4 mb-2 d-flex flex-column justify-content-center align-items-center" |
||||
|
style="font-size:25px; font-weight:bold;background-color:#FAF6EA; margin:auto; gap: 16px; border-radius: 8px;"> |
||||
|
|
||||
|
<div class="d-flex justify-content-center align-items-center" |
||||
|
style="background-color:#FCD12C; border-radius:50%; height:56px; width:56px"> |
||||
|
<img src="./assets/icons/hire-odoo.svg" |
||||
|
class="img-responsive" |
||||
|
height="28px" width="28px"> |
||||
|
</div> |
||||
|
<span style="font-size: 18px; |
||||
|
color: var(--text-color); |
||||
|
font-weight: 600;">Hire Odoo Developer</span> |
||||
|
</div> |
||||
|
</a> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<!-- licence --> |
||||
|
<div class="tab-pane fade" id="profile" role="tabpanel" |
||||
|
aria-labelledby="profile-tab"> |
||||
|
<div class="px-5"> |
||||
|
.... |
||||
|
</div> |
||||
|
</div> |
||||
|
<!-- --> |
||||
|
</div> |
||||
|
</section> |
||||
|
<!-- --> |
||||
|
</div> |
||||
|
</div> |
||||
|
</body> |
||||
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script> |
||||
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js" |
||||
|
integrity="sha512-v2CJ7UaYy4JwqLDIrZUI/4hqeoQieOmAZNXBeQyjo21dadnwR+8ZaIJVT8EE2iyI61OV8e6M8PP2/4hpQINQ/g==" |
||||
|
crossorigin="anonymous" referrerpolicy="no-referrer"></script> |
||||
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script> |
||||
|
<script> |
||||
|
$('.owl-carousel').owlCarousel({ |
||||
|
rtl: true, |
||||
|
loop: true, |
||||
|
margin: 10, |
||||
|
nav: true, |
||||
|
responsive: { |
||||
|
0: { |
||||
|
items: 1 |
||||
|
}, |
||||
|
600: { |
||||
|
items: 3 |
||||
|
}, |
||||
|
1000: { |
||||
|
items: 3 |
||||
|
} |
||||
|
} |
||||
|
}) |
||||
|
</script> |
||||
|
</html> |
||||
@ -0,0 +1,3 @@ |
|||||
|
.s_ai_snippet .loading-spinner { |
||||
|
min-height: 100px; |
||||
|
} |
||||
|
After Width: | Height: | Size: 12 KiB |
@ -0,0 +1,117 @@ |
|||||
|
/** @odoo-module **/ |
||||
|
|
||||
|
import { patch } from "@web/core/utils/patch"; |
||||
|
import { useService } from "@web/core/utils/hooks"; |
||||
|
import { rpc } from "@web/core/network/rpc"; |
||||
|
import { Component, xml, useRef, useState } from "@odoo/owl"; |
||||
|
import { AddSnippetDialog } from "@web_editor/js/editor/add_snippet_dialog"; |
||||
|
|
||||
|
|
||||
|
// Define a custom Owl component for the AI Prompt Modal
|
||||
|
class AIPromptModal extends Component { |
||||
|
setup() { |
||||
|
this.orm = useService("orm"); |
||||
|
this.notification = useService("notification"); |
||||
|
this.textAreaRef = useRef('textAreaRef'); |
||||
|
this.nameRef = useRef('snippetNameRef'); |
||||
|
this.state = useState({ |
||||
|
isLoading: false, |
||||
|
}); |
||||
|
} |
||||
|
// Close the modal (disabled if a request is loading)
|
||||
|
onClose() { |
||||
|
if (this.state.isLoading) { |
||||
|
return; |
||||
|
} |
||||
|
this.props.close(); |
||||
|
} |
||||
|
async onSubmit() { |
||||
|
const promptValue = this.textAreaRef.el.value; |
||||
|
const snippetName = this.nameRef.el.value; |
||||
|
|
||||
|
if (!promptValue || !snippetName) { |
||||
|
this.notification.add( |
||||
|
"Please fill in both the prompt and snippet name", |
||||
|
{ type: "warning" } |
||||
|
); |
||||
|
return; |
||||
|
} |
||||
|
try { |
||||
|
this.state.isLoading = true; |
||||
|
const result = await rpc('/website/generate_snippet', { |
||||
|
prompt: promptValue, |
||||
|
name: snippetName |
||||
|
}); |
||||
|
if (result.error) { |
||||
|
this.notification.add(result.error, { type: "danger" }); |
||||
|
} else { |
||||
|
this.notification.add( |
||||
|
"Snippet generated successfully! Refreshing snippet panel...", |
||||
|
{ type: "success" } |
||||
|
); |
||||
|
window.location.reload(); |
||||
|
} |
||||
|
} catch (error) { |
||||
|
this.notification.add( |
||||
|
"Failed to generate snippet: " + error, |
||||
|
{ type: "danger" } |
||||
|
); |
||||
|
} finally { |
||||
|
this.state.isLoading = false; |
||||
|
} |
||||
|
this.props.close(); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
// Define the template for the modal
|
||||
|
AIPromptModal.template = xml` |
||||
|
<div class="modal o_technical_modal d-block" tabindex="-1" role="dialog"> |
||||
|
<div class="modal-dialog" role="document"> |
||||
|
<div class="modal-content"> |
||||
|
<div class="modal-header"> |
||||
|
<h5 class="modal-title">Generate Snippet with AI</h5> |
||||
|
<button type="button" class="btn-close" t-att-disabled="state.isLoading" t-on-click="onClose" aria-label="Close"/> |
||||
|
</div> |
||||
|
<div class="modal-body"> |
||||
|
<div class="form-group mb-3"> |
||||
|
<label for="snippet-name" class="form-label">Snippet Name</label> |
||||
|
<input type="text" id="snippet-name" class="form-control" t-ref="snippetNameRef" |
||||
|
t-att-disabled="state.isLoading" placeholder="Enter a name for your snippet"/> |
||||
|
</div> |
||||
|
<div class="form-group"> |
||||
|
<label for="ai-prompt" class="form-label">Enter your prompt here...</label> |
||||
|
<textarea id="ai-prompt" class="form-control" rows="3" t-ref="textAreaRef" |
||||
|
t-att-disabled="state.isLoading"/> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="modal-footer"> |
||||
|
<button type="button" class="btn btn-secondary" t-att-disabled="state.isLoading" t-on-click="onClose">Cancel</button> |
||||
|
<button type="button" class="btn btn-primary" t-att-disabled="state.isLoading" t-on-click="onSubmit"> |
||||
|
<t t-if="state.isLoading"> |
||||
|
<span class="fa fa-spinner fa-spin me-1"></span> |
||||
|
Generating... |
||||
|
</t> |
||||
|
<t t-else="">Generate</t> |
||||
|
</button> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
`;
|
||||
|
|
||||
|
// Patch the AddSnippetDialog to add the AI prompt dialog on click
|
||||
|
const originalSetup = AddSnippetDialog.prototype.setup; |
||||
|
patch(AddSnippetDialog.prototype, { |
||||
|
setup() { |
||||
|
originalSetup.call(this); |
||||
|
this.dialog = useService("dialog"); |
||||
|
}, |
||||
|
async _onGenerateClick() { |
||||
|
this.dialog.add(AIPromptModal, { |
||||
|
onClose: () => { |
||||
|
// Refresh the snippets panel after closing
|
||||
|
this.render(); |
||||
|
} |
||||
|
}); |
||||
|
} |
||||
|
}); |
||||
@ -0,0 +1,241 @@ |
|||||
|
/** @odoo-module **/ |
||||
|
|
||||
|
import { patch } from "@web/core/utils/patch"; |
||||
|
import { _t } from "@web/core/l10n/translation"; |
||||
|
import { AddSnippetDialog } from "@web_editor/js/editor/add_snippet_dialog"; |
||||
|
|
||||
|
|
||||
|
/** |
||||
|
* Patch AddSnippetDialog to: |
||||
|
* - add custom tooltip on hover showing snippet name |
||||
|
*/ |
||||
|
patch(AddSnippetDialog.prototype, { |
||||
|
/** |
||||
|
* Override default snippet insertion. |
||||
|
* Inserts snippets into two columns, filters by search, handles custom snippets, etc. |
||||
|
*/ |
||||
|
async insertSnippets() { |
||||
|
const insertSnippetsCallID = ++this.currentInsertSnippetsCallID; |
||||
|
let snippetsToDisplay = [...this.props.snippets.values()].filter(snippet => { |
||||
|
return !snippet.excluded && snippet.group; |
||||
|
}); |
||||
|
if (this.state.search) { |
||||
|
const search = this.state.search; |
||||
|
const selectorSearch = /^s_[\w-]*$/.test(search) && `[class^="${search}"], [class*=" ${search}"]`; |
||||
|
const lowerCasedSearch = search.toLowerCase(); |
||||
|
const strMatches = str => str.toLowerCase().includes(lowerCasedSearch); |
||||
|
snippetsToDisplay = snippetsToDisplay.filter(snippet => { |
||||
|
return selectorSearch && ( |
||||
|
snippet.baseBody.matches(selectorSearch) |
||||
|
|| snippet.baseBody.querySelector(selectorSearch) |
||||
|
) |
||||
|
|| strMatches(snippet.category.text) |
||||
|
|| strMatches(snippet.displayName) |
||||
|
|| strMatches(snippet.data.oeKeywords || ''); |
||||
|
}); |
||||
|
if (selectorSearch) { |
||||
|
snippetsToDisplay.sort((snippetA, snippetB) => { |
||||
|
if (snippetA.data.snippet === search) { |
||||
|
return -1; |
||||
|
} |
||||
|
if (snippetB.data.snippet === search) { |
||||
|
return 1; |
||||
|
} |
||||
|
const aHasExactClassOnRoot = snippetA.baseBody.classList.contains(search); |
||||
|
const bHasExactClassOnRoot = snippetB.baseBody.classList.contains(search); |
||||
|
if (aHasExactClassOnRoot !== bHasExactClassOnRoot) { |
||||
|
return aHasExactClassOnRoot ? -1 : 1; |
||||
|
} |
||||
|
const aHasPartialClassOnRoot = snippetA.baseBody.matches(selectorSearch); |
||||
|
const bHasPartialClassOnRoot = snippetB.baseBody.matches(selectorSearch); |
||||
|
if (aHasPartialClassOnRoot !== bHasPartialClassOnRoot) { |
||||
|
return aHasPartialClassOnRoot ? -1 : 1; |
||||
|
} |
||||
|
|
||||
|
return 0; |
||||
|
}); |
||||
|
} |
||||
|
} else { |
||||
|
snippetsToDisplay = snippetsToDisplay.filter(snippet => { |
||||
|
return snippet.group === this.state.groupSelected; |
||||
|
}); |
||||
|
} |
||||
|
this.iframeDocument.body.scrollTop = 0; |
||||
|
const rowEl = document.createElement("div"); |
||||
|
rowEl.classList.add("row", "g-0", "o_snippets_preview_row"); |
||||
|
rowEl.style.setProperty("direction", this.props.frontendDirection); |
||||
|
const leftColEl = document.createElement("div"); |
||||
|
leftColEl.classList.add("col-lg-6"); |
||||
|
rowEl.appendChild(leftColEl); |
||||
|
const rightColEl = document.createElement("div"); |
||||
|
rightColEl.classList.add("col-lg-6"); |
||||
|
rowEl.appendChild(rightColEl); |
||||
|
this.iframeDocument.body.appendChild(rowEl); |
||||
|
const BIG_CHUNK_SIZE = 6; |
||||
|
const SMALL_CHUNK_SIZE = 3; |
||||
|
const chunks = [snippetsToDisplay.splice(0, BIG_CHUNK_SIZE)]; |
||||
|
while (snippetsToDisplay.length) { |
||||
|
chunks.push(snippetsToDisplay.splice(0, SMALL_CHUNK_SIZE)); |
||||
|
} |
||||
|
let leftColSize = 0; |
||||
|
let rightColSize = 0; |
||||
|
for (const chunk of chunks) { |
||||
|
const itemEls = await Promise.all(chunk.map(snippet => { |
||||
|
let containerEl = null; |
||||
|
let clonedSnippetEl; |
||||
|
let originalSnippet; |
||||
|
if (snippet.isCustom) { |
||||
|
originalSnippet = [...this.props.snippets.values()].filter(snip => |
||||
|
!snip.isCustom && snip.name === snippet.name |
||||
|
)[0]; |
||||
|
if (originalSnippet.baseBody.querySelector(".s_dialog_preview") |
||||
|
|| originalSnippet.imagePreview |
||||
|
|| originalSnippet.name === "s_countdown") { |
||||
|
clonedSnippetEl = originalSnippet.baseBody.cloneNode(true); |
||||
|
} |
||||
|
} |
||||
|
if (!clonedSnippetEl) { |
||||
|
clonedSnippetEl = snippet.baseBody.cloneNode(true); |
||||
|
} |
||||
|
clonedSnippetEl.classList.remove("oe_snippet_body"); |
||||
|
const snippetPreviewWrapEl = document.createElement("div"); |
||||
|
snippetPreviewWrapEl.classList.add("o_snippet_preview_wrap", "position-relative"); |
||||
|
snippetPreviewWrapEl.dataset.snippetId = snippet.name; |
||||
|
snippetPreviewWrapEl.dataset.snippetKey = snippet.key; |
||||
|
snippetPreviewWrapEl.dataset.snippetName = snippet.displayName; |
||||
|
snippetPreviewWrapEl.appendChild(clonedSnippetEl); |
||||
|
this.__onSnippetPreviewClick = this._onSnippetPreviewClick.bind(this); |
||||
|
snippetPreviewWrapEl.addEventListener("click", this.__onSnippetPreviewClick); |
||||
|
snippetPreviewWrapEl.addEventListener("mouseenter", this.__onSnippetPreviewHover); |
||||
|
containerEl = snippetPreviewWrapEl; |
||||
|
if (snippet.installable) { |
||||
|
snippetPreviewWrapEl.classList.add("o_snippet_preview_install"); |
||||
|
clonedSnippetEl.dataset.moduleId = snippet.moduleId; |
||||
|
const installBtnEl = document.createElement("button"); |
||||
|
installBtnEl.classList.add("o_snippet_preview_install_btn", "btn", "text-white", "rounded-1", "mx-auto", "p-2", "bottom-50"); |
||||
|
installBtnEl.innerText = _t("Install %s", snippet.displayName); |
||||
|
snippetPreviewWrapEl.appendChild(installBtnEl); |
||||
|
} |
||||
|
// Image preview
|
||||
|
const imagePreview = snippet.imagePreview || originalSnippet?.imagePreview; |
||||
|
if (imagePreview) { |
||||
|
clonedSnippetEl.style.setProperty("padding", "0", "important"); |
||||
|
const previewImgDivEl = document.createElement("div"); |
||||
|
previewImgDivEl.classList.add("s_dialog_preview", "s_dialog_preview_image"); |
||||
|
const previewImgEl = document.createElement("img"); |
||||
|
previewImgEl.src = imagePreview; |
||||
|
previewImgDivEl.appendChild(previewImgEl); |
||||
|
clonedSnippetEl.innerHTML = ""; |
||||
|
clonedSnippetEl.appendChild(previewImgDivEl); |
||||
|
} |
||||
|
|
||||
|
clonedSnippetEl.classList.remove("o_dynamic_empty"); |
||||
|
|
||||
|
if (snippet.isCustom) { |
||||
|
const editCustomSnippetEl = document.createElement("div"); |
||||
|
editCustomSnippetEl.classList.add("d-grid", "mt-2", "mx-5", "gap-2", |
||||
|
"d-md-flex", "justify-content-md-end", "o_custom_snippet_edit"); |
||||
|
const spanEl = document.createElement("span"); |
||||
|
spanEl.classList.add("w-100"); |
||||
|
spanEl.textContent = snippet.displayName; |
||||
|
const renameBtnEl = document.createElement("button"); |
||||
|
renameBtnEl.classList.add("btn", "fa", "fa-pencil", "me-md-2"); |
||||
|
renameBtnEl.type = "button"; |
||||
|
|
||||
|
const removeBtnEl = document.createElement("button"); |
||||
|
removeBtnEl.classList.add("btn", "fa", "fa-trash"); |
||||
|
removeBtnEl.type = "button"; |
||||
|
|
||||
|
editCustomSnippetEl.appendChild(spanEl); |
||||
|
editCustomSnippetEl.appendChild(renameBtnEl); |
||||
|
editCustomSnippetEl.appendChild(removeBtnEl); |
||||
|
|
||||
|
const customSnippetWrapEl = document.createElement("div"); |
||||
|
customSnippetWrapEl.classList.add("o_custom_snippet_wrap"); |
||||
|
customSnippetWrapEl.appendChild(snippetPreviewWrapEl); |
||||
|
customSnippetWrapEl.appendChild(editCustomSnippetEl); |
||||
|
containerEl = customSnippetWrapEl; |
||||
|
|
||||
|
this.__onRenameCustomBtnClick = this._onRenameCustomBtnClick.bind(this); |
||||
|
renameBtnEl.addEventListener("click", this.__onRenameCustomBtnClick); |
||||
|
this.__onDeleteCustomBtnClick = this._onDeleteCustomBtnClick.bind(this); |
||||
|
removeBtnEl.addEventListener("click", this.__onDeleteCustomBtnClick); |
||||
|
} |
||||
|
containerEl.classList.add("invisible"); |
||||
|
leftColEl.appendChild(containerEl); |
||||
|
|
||||
|
// preload images
|
||||
|
const imageEls = snippetPreviewWrapEl.querySelectorAll("img"); |
||||
|
// TODO: move onceAllImagesLoaded in web_editor and to use it here
|
||||
|
return Promise.all(Array.from(imageEls).map(imgEl => { |
||||
|
imgEl.setAttribute("loading", "eager"); |
||||
|
return new Promise(resolve => { |
||||
|
if (imgEl.complete) { |
||||
|
resolve(); |
||||
|
} else { |
||||
|
imgEl.onload = () => resolve(); |
||||
|
imgEl.onerror = () => resolve(); |
||||
|
} |
||||
|
}); |
||||
|
})).then(() => containerEl); |
||||
|
})); |
||||
|
if (this.currentInsertSnippetsCallID !== insertSnippetsCallID) { |
||||
|
return; |
||||
|
} |
||||
|
// Balance items into two columns
|
||||
|
const leftColElements = []; |
||||
|
const rightColElements = []; |
||||
|
for (const itemEl of itemEls) { |
||||
|
const size = itemEl.getBoundingClientRect().height; |
||||
|
if (leftColSize <= rightColSize) { |
||||
|
leftColElements.push(itemEl); |
||||
|
leftColSize += size; |
||||
|
} else { |
||||
|
rightColElements.push(itemEl); |
||||
|
rightColSize += size; |
||||
|
} |
||||
|
} |
||||
|
for (const [colEl, colItemEls] of [ |
||||
|
[leftColEl, leftColElements], |
||||
|
[rightColEl, rightColElements], |
||||
|
]) { |
||||
|
for (const el of colItemEls) { |
||||
|
colEl.appendChild(el); |
||||
|
el.classList.remove("invisible"); |
||||
|
} |
||||
|
} |
||||
|
// Remove previous content
|
||||
|
while (rowEl.previousSibling) { |
||||
|
rowEl.previousSibling.remove(); |
||||
|
} |
||||
|
} |
||||
|
this._updateSnippetContent(this.iframeDocument); |
||||
|
}, |
||||
|
/** |
||||
|
* Show snippet name on snippet hover. |
||||
|
*/ |
||||
|
__onSnippetPreviewHover(ev) { |
||||
|
const previewEl = ev.currentTarget; |
||||
|
const title = previewEl.firstElementChild?.getAttribute("title"); |
||||
|
if (!title || previewEl.querySelector(".snippet-hover-title-tooltip")) { |
||||
|
return; |
||||
|
} |
||||
|
const tooltip = document.createElement("div"); |
||||
|
tooltip.className = "snippet-hover-title-tooltip position-absolute top-0 start-50 translate-middle-x bg-dark text-white px-5 py-3 rounded shadow-lg"; |
||||
|
Object.assign(tooltip.style, { |
||||
|
zIndex: "1000", |
||||
|
pointerEvents: "none", |
||||
|
fontSize: "2rem", |
||||
|
fontWeight: "900", |
||||
|
border: "2px solid white", |
||||
|
boxShadow: "0 4px 20px rgba(0, 0, 0, 0.3)", |
||||
|
}); |
||||
|
tooltip.textContent = title; |
||||
|
previewEl.appendChild(tooltip); |
||||
|
const removeTooltip = () => { |
||||
|
tooltip.remove(); |
||||
|
previewEl.removeEventListener("mouseleave", removeTooltip); |
||||
|
}; |
||||
|
previewEl.addEventListener("mouseleave", removeTooltip, { once: true }); |
||||
|
}, |
||||
|
}); |
||||
Some files were not shown because too many files changed in this diff
Loading…
Reference in new issue