743 lines
26 KiB
Python
743 lines
26 KiB
Python
"""
|
|
title: Flash Card
|
|
author: Fu-Jie
|
|
author_url: https://github.com/Fu-Jie
|
|
funding_url: https://github.com/Fu-Jie/awesome-openwebui
|
|
version: 0.2.4
|
|
openwebui_id: 65a2ea8f-2a13-4587-9d76-55eea0035cc8
|
|
icon_url: data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjxwb2x5Z29uIHBvaW50cz0iMTIgMiAyIDcgMTIgMTIgMjIgNyAxMiAyIi8+PHBvbHlsaW5lIHBvaW50cz0iMiAxNyAxMiAyMiAyMiAxNyIvPjxwb2x5bGluZSBwb2ludHM9IjIgMTIgMTIgMTcgMjIgMTIiLz48L3N2Zz4=
|
|
description: Quickly generates beautiful flashcards from text, extracting key points and categories.
|
|
"""
|
|
|
|
from pydantic import BaseModel, Field
|
|
from typing import Optional, Dict, Any, List
|
|
import json
|
|
import logging
|
|
import re
|
|
from open_webui.utils.chat import generate_chat_completion
|
|
from open_webui.models.users import Users
|
|
|
|
# Setup logging
|
|
logging.basicConfig(level=logging.INFO)
|
|
logger = logging.getLogger(__name__)
|
|
|
|
HTML_WRAPPER_TEMPLATE = """
|
|
<!-- OPENWEBUI_PLUGIN_OUTPUT -->
|
|
<!DOCTYPE html>
|
|
<html lang="{user_language}">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<style>
|
|
body {
|
|
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
|
|
margin: 0;
|
|
padding: 10px;
|
|
background-color: transparent;
|
|
}
|
|
#main-container {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 20px;
|
|
align-items: flex-start;
|
|
width: 100%;
|
|
}
|
|
.plugin-item {
|
|
flex: 1 1 400px; /* Default width, allows shrinking/growing */
|
|
min-width: 300px;
|
|
background: white;
|
|
border-radius: 12px;
|
|
box-shadow: 0 4px 6px rgba(0,0,0,0.05);
|
|
overflow: hidden;
|
|
border: 1px solid #e5e7eb;
|
|
transition: all 0.3s ease;
|
|
}
|
|
.plugin-item:hover {
|
|
box-shadow: 0 10px 15px rgba(0,0,0,0.1);
|
|
}
|
|
@media (max-width: 768px) {
|
|
.plugin-item { flex: 1 1 100%; }
|
|
}
|
|
/* STYLES_INSERTION_POINT */
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="main-container">
|
|
<!-- CONTENT_INSERTION_POINT -->
|
|
</div>
|
|
<!-- SCRIPTS_INSERTION_POINT -->
|
|
</body>
|
|
</html>
|
|
"""
|
|
|
|
|
|
class Action:
|
|
class Valves(BaseModel):
|
|
MODEL_ID: str = Field(
|
|
default="",
|
|
description="Model ID used for generating card content. If empty, uses the current model.",
|
|
)
|
|
MIN_TEXT_LENGTH: int = Field(
|
|
default=50,
|
|
description="Minimum text length required to generate a flashcard (characters).",
|
|
)
|
|
LANGUAGE: str = Field(
|
|
default="en",
|
|
description="Target language for card content (e.g., 'en', 'zh').",
|
|
)
|
|
SHOW_STATUS: bool = Field(
|
|
default=True,
|
|
description="Whether to show status updates in the chat interface.",
|
|
)
|
|
CLEAR_PREVIOUS_HTML: bool = Field(
|
|
default=False,
|
|
description="Whether to force clear previous plugin results (if True, overwrites instead of merging).",
|
|
)
|
|
MESSAGE_COUNT: int = Field(
|
|
default=1,
|
|
description="Number of recent messages to use for generation. Set to 1 for just the last message, or higher for more context.",
|
|
)
|
|
|
|
def __init__(self):
|
|
self.valves = self.Valves()
|
|
|
|
def _get_user_context(self, __user__: Optional[Dict[str, Any]]) -> Dict[str, str]:
|
|
"""Extract basic user context with safe fallbacks."""
|
|
if isinstance(__user__, (list, tuple)):
|
|
user_data = __user__[0] if __user__ else {}
|
|
elif isinstance(__user__, dict):
|
|
user_data = __user__
|
|
else:
|
|
user_data = {}
|
|
|
|
return {
|
|
"user_id": user_data.get("id", "unknown_user"),
|
|
"user_name": user_data.get("name", "User"),
|
|
"user_language": user_data.get("language", "en-US"),
|
|
}
|
|
|
|
async def action(
|
|
self,
|
|
body: dict,
|
|
__user__: Optional[Dict[str, Any]] = None,
|
|
__event_emitter__: Optional[Any] = None,
|
|
__request__: Optional[Any] = None,
|
|
) -> Optional[dict]:
|
|
logger.info(f"Action: {__name__} triggered")
|
|
|
|
if not __event_emitter__:
|
|
return body
|
|
|
|
# Get messages based on MESSAGE_COUNT
|
|
messages = body.get("messages", [])
|
|
if not messages:
|
|
return body
|
|
|
|
# Get last N messages based on MESSAGE_COUNT
|
|
message_count = min(self.valves.MESSAGE_COUNT, len(messages))
|
|
recent_messages = messages[-message_count:]
|
|
|
|
# Aggregate content from selected messages with labels
|
|
aggregated_parts = []
|
|
for i, msg in enumerate(recent_messages, 1):
|
|
text_content = self._extract_text_content(msg.get("content"))
|
|
if text_content:
|
|
role = msg.get("role", "unknown")
|
|
role_label = (
|
|
"User"
|
|
if role == "user"
|
|
else "Assistant" if role == "assistant" else role
|
|
)
|
|
aggregated_parts.append(f"{text_content}")
|
|
|
|
if not aggregated_parts:
|
|
return body
|
|
|
|
target_message = "\n\n---\n\n".join(aggregated_parts)
|
|
|
|
# Check text length
|
|
text_length = len(target_message)
|
|
if text_length < self.valves.MIN_TEXT_LENGTH:
|
|
await self._emit_notification(
|
|
__event_emitter__,
|
|
f"Text too short ({text_length} chars), recommended at least {self.valves.MIN_TEXT_LENGTH} chars.",
|
|
"warning",
|
|
)
|
|
return body
|
|
|
|
# Notify user that we are generating the card
|
|
await self._emit_notification(
|
|
__event_emitter__, "⚡ Generating Flash Card...", "info"
|
|
)
|
|
await self._emit_status(
|
|
__event_emitter__, "⚡ Flash Card: Starting generation...", done=False
|
|
)
|
|
|
|
try:
|
|
# 1. Extract information using LLM
|
|
await self._emit_status(
|
|
__event_emitter__,
|
|
"⚡ Flash Card: Calling AI model to analyze content...",
|
|
done=False,
|
|
)
|
|
|
|
user_ctx = self._get_user_context(__user__)
|
|
user_id = user_ctx["user_id"]
|
|
user_obj = Users.get_user_by_id(user_id)
|
|
|
|
target_model = (
|
|
self.valves.MODEL_ID if self.valves.MODEL_ID else body.get("model")
|
|
)
|
|
|
|
system_prompt = f"""
|
|
You are a Flash Card Generation Expert, specializing in creating knowledge cards suitable for learning and memorization. Your task is to distill text into concise, easy-to-remember flashcards.
|
|
|
|
Please extract the following fields and return them in JSON format:
|
|
1. "title": Create a short, precise title (3-8 words), highlighting the core concept.
|
|
2. "summary": Summarize the core essence in one sentence (10-25 words), making it easy to understand and remember.
|
|
3. "key_points": List 3-5 key memory points (5-15 words each).
|
|
- Each point should be an independent knowledge unit.
|
|
- Use concise, conversational expression.
|
|
- Avoid long sentences.
|
|
4. "tags": List 2-4 classification tags (1-3 words each).
|
|
5. "category": Choose a main category (e.g., Concept, Skill, Fact, Method, etc.).
|
|
|
|
Target Language: {self.valves.LANGUAGE}
|
|
|
|
Important Principles:
|
|
- **Minimalism**: Refine each point to the extreme.
|
|
- **Memory First**: Content should be easy to memorize and recall.
|
|
- **Core Focus**: Extract only the most core knowledge points.
|
|
- **Conversational**: Use easy-to-understand language.
|
|
- Return ONLY the JSON object, do not include markdown formatting.
|
|
"""
|
|
|
|
prompt = f"Please refine the following text into a learning flashcard:\n\n{target_message}"
|
|
|
|
payload = {
|
|
"model": target_model,
|
|
"messages": [
|
|
{"role": "system", "content": system_prompt},
|
|
{"role": "user", "content": prompt},
|
|
],
|
|
"stream": False,
|
|
}
|
|
|
|
response = await generate_chat_completion(__request__, payload, user_obj)
|
|
content = response["choices"][0]["message"]["content"]
|
|
|
|
await self._emit_status(
|
|
__event_emitter__,
|
|
"⚡ Flash Card: AI analysis complete, parsing data...",
|
|
done=False,
|
|
)
|
|
|
|
# Parse JSON
|
|
try:
|
|
# simple cleanup in case of markdown code blocks
|
|
if "```json" in content:
|
|
content = content.split("```json")[1].split("```")[0].strip()
|
|
elif "```" in content:
|
|
content = content.split("```")[1].split("```")[0].strip()
|
|
|
|
card_data = json.loads(content)
|
|
except Exception as e:
|
|
logger.error(f"Failed to parse JSON: {e}, content: {content}")
|
|
await self._emit_status(
|
|
__event_emitter__, "❌ Flash Card: Data parsing failed", done=True
|
|
)
|
|
await self._emit_notification(
|
|
__event_emitter__,
|
|
"❌ Failed to generate card data, please try again.",
|
|
"error",
|
|
)
|
|
return body
|
|
|
|
# 2. Generate HTML components
|
|
await self._emit_status(
|
|
__event_emitter__, "⚡ Flash Card: Rendering card...", done=False
|
|
)
|
|
card_content, card_style = self.generate_html_card_components(card_data)
|
|
|
|
# 3. Append to message
|
|
# Extract existing HTML if any
|
|
existing_html_block = ""
|
|
match = re.search(
|
|
r"```html\s*(<!-- OPENWEBUI_PLUGIN_OUTPUT -->[\s\S]*?)```",
|
|
body["messages"][-1]["content"],
|
|
)
|
|
if match:
|
|
existing_html_block = match.group(1)
|
|
|
|
if self.valves.CLEAR_PREVIOUS_HTML:
|
|
body["messages"][-1]["content"] = self._remove_existing_html(
|
|
body["messages"][-1]["content"]
|
|
)
|
|
final_html = self._merge_html(
|
|
"", card_content, card_style, "", self.valves.LANGUAGE
|
|
)
|
|
else:
|
|
if existing_html_block:
|
|
body["messages"][-1]["content"] = self._remove_existing_html(
|
|
body["messages"][-1]["content"]
|
|
)
|
|
final_html = self._merge_html(
|
|
existing_html_block,
|
|
card_content,
|
|
card_style,
|
|
"",
|
|
self.valves.LANGUAGE,
|
|
)
|
|
else:
|
|
final_html = self._merge_html(
|
|
"", card_content, card_style, "", self.valves.LANGUAGE
|
|
)
|
|
|
|
html_embed_tag = f"```html\n{final_html}\n```"
|
|
body["messages"][-1]["content"] += f"\n\n{html_embed_tag}"
|
|
|
|
await self._emit_status(
|
|
__event_emitter__, "✅ Flash Card: Generation complete!", done=True
|
|
)
|
|
await self._emit_notification(
|
|
__event_emitter__, "⚡ Flash Card generated successfully!", "success"
|
|
)
|
|
|
|
return body
|
|
|
|
except Exception as e:
|
|
logger.error(f"Error generating knowledge card: {e}")
|
|
await self._emit_status(
|
|
__event_emitter__, "❌ Flash Card: Generation failed", done=True
|
|
)
|
|
await self._emit_notification(
|
|
__event_emitter__,
|
|
f"❌ Error generating knowledge card: {str(e)}",
|
|
"error",
|
|
)
|
|
return body
|
|
|
|
async def _emit_status(self, emitter, description: str, done: bool = False):
|
|
"""Emits a status update event."""
|
|
if self.valves.SHOW_STATUS and emitter:
|
|
await emitter(
|
|
{"type": "status", "data": {"description": description, "done": done}}
|
|
)
|
|
|
|
async def _emit_notification(self, emitter, content: str, ntype: str = "info"):
|
|
"""Emits a notification event (info/success/warning/error)."""
|
|
if emitter:
|
|
await emitter(
|
|
{"type": "notification", "data": {"type": ntype, "content": content}}
|
|
)
|
|
|
|
def _remove_existing_html(self, content: str) -> str:
|
|
"""Removes existing plugin-generated HTML code blocks from the content."""
|
|
pattern = r"```html\s*<!-- OPENWEBUI_PLUGIN_OUTPUT -->[\s\S]*?```"
|
|
return re.sub(pattern, "", content).strip()
|
|
|
|
def _extract_text_content(self, content) -> str:
|
|
"""Extract text from message content, supporting multimodal message formats"""
|
|
if isinstance(content, str):
|
|
return content
|
|
elif isinstance(content, list):
|
|
# Multimodal message: [{"type": "text", "text": "..."}, {"type": "image_url", ...}]
|
|
text_parts = []
|
|
for item in content:
|
|
if isinstance(item, dict) and item.get("type") == "text":
|
|
text_parts.append(item.get("text", ""))
|
|
elif isinstance(item, str):
|
|
text_parts.append(item)
|
|
return "\n".join(text_parts)
|
|
return str(content) if content else ""
|
|
|
|
def _merge_html(
|
|
self,
|
|
existing_html_code: str,
|
|
new_content: str,
|
|
new_styles: str = "",
|
|
new_scripts: str = "",
|
|
user_language: str = "en-US",
|
|
) -> str:
|
|
"""
|
|
Merges new content into an existing HTML container, or creates a new one.
|
|
"""
|
|
if (
|
|
"<!-- OPENWEBUI_PLUGIN_OUTPUT -->" in existing_html_code
|
|
and "<!-- CONTENT_INSERTION_POINT -->" in existing_html_code
|
|
):
|
|
base_html = existing_html_code
|
|
base_html = re.sub(r"^```html\s*", "", base_html)
|
|
base_html = re.sub(r"\s*```$", "", base_html)
|
|
else:
|
|
base_html = HTML_WRAPPER_TEMPLATE.replace("{user_language}", user_language)
|
|
|
|
wrapped_content = f'<div class="plugin-item">\n{new_content}\n</div>'
|
|
|
|
if new_styles:
|
|
base_html = base_html.replace(
|
|
"/* STYLES_INSERTION_POINT */",
|
|
f"{new_styles}\n/* STYLES_INSERTION_POINT */",
|
|
)
|
|
|
|
base_html = base_html.replace(
|
|
"<!-- CONTENT_INSERTION_POINT -->",
|
|
f"{wrapped_content}\n<!-- CONTENT_INSERTION_POINT -->",
|
|
)
|
|
|
|
if new_scripts:
|
|
base_html = base_html.replace(
|
|
"<!-- SCRIPTS_INSERTION_POINT -->",
|
|
f"{new_scripts}\n<!-- SCRIPTS_INSERTION_POINT -->",
|
|
)
|
|
|
|
return base_html.strip()
|
|
|
|
def generate_html_card_components(self, data):
|
|
# Enhanced CSS with premium styling
|
|
style = """
|
|
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');
|
|
|
|
.knowledge-card-container {
|
|
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
|
display: flex;
|
|
justify-content: center;
|
|
margin: 30px 0;
|
|
padding: 0 10px;
|
|
}
|
|
|
|
.knowledge-card {
|
|
width: 100%;
|
|
max-width: 500px;
|
|
border-radius: 20px;
|
|
overflow: hidden;
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
padding: 3px;
|
|
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
|
|
position: relative;
|
|
}
|
|
|
|
.knowledge-card:hover {
|
|
transform: translateY(-8px) scale(1.02);
|
|
box-shadow: 0 25px 50px -12px rgba(102, 126, 234, 0.4);
|
|
}
|
|
|
|
.knowledge-card::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: -2px;
|
|
left: -2px;
|
|
right: -2px;
|
|
bottom: -2px;
|
|
background: linear-gradient(135deg, #667eea, #764ba2, #f093fb, #4facfe);
|
|
border-radius: 20px;
|
|
opacity: 0;
|
|
transition: opacity 0.4s ease;
|
|
z-index: -1;
|
|
filter: blur(10px);
|
|
}
|
|
|
|
.knowledge-card:hover::before {
|
|
opacity: 0.7;
|
|
animation: glow 2s ease-in-out infinite;
|
|
}
|
|
|
|
@keyframes glow {
|
|
0%, 100% { opacity: 0.5; }
|
|
50% { opacity: 0.8; }
|
|
}
|
|
|
|
.card-inner {
|
|
background: #ffffff;
|
|
border-radius: 18px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.card-header {
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
color: white;
|
|
padding: 32px 28px;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.card-header::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: -50%;
|
|
right: -50%;
|
|
width: 200%;
|
|
height: 200%;
|
|
background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
|
|
animation: rotate 15s linear infinite;
|
|
}
|
|
|
|
@keyframes rotate {
|
|
from { transform: rotate(0deg); }
|
|
to { transform: rotate(360deg); }
|
|
}
|
|
|
|
.card-category {
|
|
font-size: 0.7em;
|
|
text-transform: uppercase;
|
|
letter-spacing: 2px;
|
|
opacity: 0.95;
|
|
margin-bottom: 10px;
|
|
font-weight: 700;
|
|
display: inline-block;
|
|
padding: 4px 12px;
|
|
background: rgba(255, 255, 255, 0.2);
|
|
border-radius: 12px;
|
|
backdrop-filter: blur(10px);
|
|
}
|
|
|
|
.card-title {
|
|
font-size: 1.75em;
|
|
font-weight: 800;
|
|
margin: 0;
|
|
line-height: 1.3;
|
|
position: relative;
|
|
z-index: 1;
|
|
letter-spacing: -0.5px;
|
|
}
|
|
|
|
.card-body {
|
|
padding: 28px;
|
|
color: #1a1a1a;
|
|
background: linear-gradient(to bottom, #ffffff 0%, #fafafa 100%);
|
|
}
|
|
|
|
.card-summary {
|
|
font-size: 1.05em;
|
|
color: #374151;
|
|
margin-bottom: 24px;
|
|
line-height: 1.7;
|
|
border-left: 5px solid #764ba2;
|
|
padding: 16px 20px;
|
|
background: linear-gradient(135deg, rgba(102, 126, 234, 0.08) 0%, rgba(118, 75, 162, 0.08) 100%);
|
|
border-radius: 0 12px 12px 0;
|
|
font-weight: 500;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.card-summary::before {
|
|
content: '"';
|
|
position: absolute;
|
|
top: -10px;
|
|
left: 10px;
|
|
font-size: 4em;
|
|
color: rgba(118, 75, 162, 0.1);
|
|
font-family: Georgia, serif;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.card-section-title {
|
|
font-size: 0.85em;
|
|
font-weight: 700;
|
|
color: #764ba2;
|
|
margin-bottom: 14px;
|
|
text-transform: uppercase;
|
|
letter-spacing: 1.5px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
|
|
.card-section-title::before {
|
|
content: '';
|
|
width: 4px;
|
|
height: 16px;
|
|
background: linear-gradient(to bottom, #667eea, #764ba2);
|
|
border-radius: 2px;
|
|
}
|
|
|
|
.card-points {
|
|
list-style: none;
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
|
|
.card-points li {
|
|
margin-bottom: 14px;
|
|
padding: 12px 16px 12px 44px;
|
|
position: relative;
|
|
line-height: 1.6;
|
|
color: #374151;
|
|
background: #ffffff;
|
|
border-radius: 10px;
|
|
transition: all 0.3s ease;
|
|
border: 1px solid #e5e7eb;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.card-points li:hover {
|
|
transform: translateX(5px);
|
|
background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
|
|
border-color: #764ba2;
|
|
box-shadow: 0 4px 12px rgba(118, 75, 162, 0.1);
|
|
}
|
|
|
|
.card-points li::before {
|
|
content: '✓';
|
|
color: #ffffff;
|
|
background: linear-gradient(135deg, #667eea, #764ba2);
|
|
font-weight: bold;
|
|
position: absolute;
|
|
left: 12px;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
width: 24px;
|
|
height: 24px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: 50%;
|
|
font-size: 0.85em;
|
|
box-shadow: 0 2px 8px rgba(118, 75, 162, 0.3);
|
|
}
|
|
|
|
.card-footer {
|
|
padding: 20px 28px;
|
|
background: linear-gradient(to right, #f8fafc 0%, #f1f5f9 100%);
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 10px;
|
|
border-top: 2px solid #e5e7eb;
|
|
align-items: center;
|
|
}
|
|
|
|
.card-tag-label {
|
|
font-size: 0.75em;
|
|
font-weight: 700;
|
|
color: #64748b;
|
|
text-transform: uppercase;
|
|
letter-spacing: 1px;
|
|
margin-right: 4px;
|
|
}
|
|
|
|
.card-tag {
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
color: white;
|
|
padding: 6px 16px;
|
|
border-radius: 20px;
|
|
font-size: 0.85em;
|
|
font-weight: 600;
|
|
transition: all 0.3s ease;
|
|
border: 2px solid transparent;
|
|
cursor: default;
|
|
letter-spacing: 0.3px;
|
|
}
|
|
|
|
.card-tag:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
|
|
border-color: rgba(255, 255, 255, 0.3);
|
|
}
|
|
|
|
/* Dark mode support */
|
|
@media (prefers-color-scheme: dark) {
|
|
.card-inner {
|
|
background: #1e1e1e;
|
|
}
|
|
|
|
.card-body {
|
|
background: linear-gradient(to bottom, #1e1e1e 0%, #252525 100%);
|
|
color: #e5e7eb;
|
|
}
|
|
|
|
.card-summary {
|
|
background: linear-gradient(135deg, rgba(102, 126, 234, 0.15) 0%, rgba(118, 75, 162, 0.15) 100%);
|
|
color: #d1d5db;
|
|
}
|
|
|
|
.card-summary::before {
|
|
color: rgba(118, 75, 162, 0.2);
|
|
}
|
|
|
|
.card-points li {
|
|
color: #d1d5db;
|
|
background: #2d2d2d;
|
|
border-color: #404040;
|
|
}
|
|
|
|
.card-points li:hover {
|
|
background: linear-gradient(135deg, rgba(102, 126, 234, 0.15) 0%, rgba(118, 75, 162, 0.15) 100%);
|
|
border-color: #667eea;
|
|
}
|
|
|
|
.card-footer {
|
|
background: linear-gradient(to right, #252525 0%, #2d2d2d 100%);
|
|
border-top-color: #404040;
|
|
}
|
|
|
|
.card-tag-label {
|
|
color: #9ca3af;
|
|
}
|
|
}
|
|
|
|
/* Mobile responsive */
|
|
@media (max-width: 640px) {
|
|
.knowledge-card {
|
|
max-width: 100%;
|
|
}
|
|
|
|
.card-header {
|
|
padding: 24px 20px;
|
|
}
|
|
|
|
.card-title {
|
|
font-size: 1.5em;
|
|
}
|
|
|
|
.card-body {
|
|
padding: 20px;
|
|
}
|
|
|
|
.card-footer {
|
|
padding: 16px 20px;
|
|
}
|
|
}
|
|
"""
|
|
|
|
# Generate tags HTML
|
|
tags_html = ""
|
|
if "tags" in data and data["tags"]:
|
|
for tag in data["tags"]:
|
|
tags_html += f'<div class="card-tag"><span class="card-tag-label">#</span>{tag}</div>'
|
|
|
|
# Generate key points HTML
|
|
points_html = ""
|
|
if "key_points" in data and data["key_points"]:
|
|
for point in data["key_points"]:
|
|
points_html += f"<li>{point}</li>"
|
|
|
|
# Build the card HTML structure
|
|
content = f"""
|
|
<div class="knowledge-card-container">
|
|
<div class="knowledge-card">
|
|
<div class="card-inner">
|
|
<div class="card-header">
|
|
<div class="card-category">{data.get('category', 'Knowledge')}</div>
|
|
<h2 class="card-title">{data.get('title', 'Flash Card')}</h2>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="card-summary">
|
|
{data.get('summary', '')}
|
|
</div>
|
|
|
|
<div class="card-section-title">KEY POINTS</div>
|
|
<ul class="card-points">
|
|
{points_html}
|
|
</ul>
|
|
</div>
|
|
<div class="card-footer">
|
|
{tags_html}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
"""
|
|
|
|
return content, style
|