Upload 7 files
Browse files- flagged/log.csv +2 -0
- gradio_app.py +24 -0
- products.json +18 -0
- requirements.txt +5 -0
- templates/index.html +14 -0
- templates/script.js +27 -0
- templates/style.css +42 -0
flagged/log.csv
ADDED
|
@@ -0,0 +1,2 @@
|
|
|
|
|
|
|
|
|
|
| 1 |
+
output,flag,username,timestamp
|
| 2 |
+
<h1>Products</h1><div><img src='https://example.com/product1.jpg' alt='Product 1' width='100'/><p>Details about Product 1</p><p>Price: $10.0</p></div><div><img src='https://example.com/product2.jpg' alt='Product 2' width='100'/><p>Details about Product 2</p><p>Price: $20.0</p></div>,,,2024-06-20 22:14:00.230627
|
gradio_app.py
ADDED
|
@@ -0,0 +1,24 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
import gradio as gr
|
| 2 |
+
import json
|
| 3 |
+
|
| 4 |
+
def load_products():
|
| 5 |
+
try:
|
| 6 |
+
with open('products.json', 'r') as f:
|
| 7 |
+
products = json.load(f)
|
| 8 |
+
return products
|
| 9 |
+
except Exception as e:
|
| 10 |
+
print(f"Error loading products: {e}")
|
| 11 |
+
return None
|
| 12 |
+
|
| 13 |
+
def show_products():
|
| 14 |
+
products = load_products()
|
| 15 |
+
if not products:
|
| 16 |
+
return "<h1>Error loading products</h1>"
|
| 17 |
+
|
| 18 |
+
html_content = "<h1>Products</h1>"
|
| 19 |
+
for product in products['products']:
|
| 20 |
+
html_content += f"<div><img src='{product['image']}' alt='{product['name']}' width='100'/><p>{product['details']}</p><p>Price: ${product['price']}</p></div>"
|
| 21 |
+
return html_content
|
| 22 |
+
|
| 23 |
+
iface = gr.Interface(fn=show_products, inputs=[], outputs='html')
|
| 24 |
+
iface.launch(share=True)
|
products.json
ADDED
|
@@ -0,0 +1,18 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
{
|
| 2 |
+
"products": [
|
| 3 |
+
{
|
| 4 |
+
"name": "Product 1",
|
| 5 |
+
"details": "Details about Product 1",
|
| 6 |
+
"price": 10.0,
|
| 7 |
+
"image": "https://example.com/product1.jpg",
|
| 8 |
+
"locations": ["Location 1", "Location 2"]
|
| 9 |
+
},
|
| 10 |
+
{
|
| 11 |
+
"name": "Product 2",
|
| 12 |
+
"details": "Details about Product 2",
|
| 13 |
+
"price": 20.0,
|
| 14 |
+
"image": "https://example.com/product2.jpg",
|
| 15 |
+
"locations": ["Location 3", "Location 4"]
|
| 16 |
+
}
|
| 17 |
+
]
|
| 18 |
+
}
|
requirements.txt
ADDED
|
@@ -0,0 +1,5 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
python-telegram-bot==21.3
|
| 2 |
+
psycopg2-binary
|
| 3 |
+
gradio
|
| 4 |
+
asyncpg
|
| 5 |
+
requests
|
templates/index.html
ADDED
|
@@ -0,0 +1,14 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
<!DOCTYPE html>
|
| 2 |
+
<html lang="en">
|
| 3 |
+
<head>
|
| 4 |
+
<meta charset="UTF-8">
|
| 5 |
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
| 6 |
+
<title>Product List</title>
|
| 7 |
+
<link rel="stylesheet" href="style.css">
|
| 8 |
+
</head>
|
| 9 |
+
<body>
|
| 10 |
+
<h1>Products</h1>
|
| 11 |
+
<div id="products-container"></div>
|
| 12 |
+
<script src="script.js"></script>
|
| 13 |
+
</body>
|
| 14 |
+
</html>
|
templates/script.js
ADDED
|
@@ -0,0 +1,27 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
document.addEventListener('DOMContentLoaded', function() {
|
| 2 |
+
fetch('/products.json')
|
| 3 |
+
.then(response => response.json())
|
| 4 |
+
.then(data => {
|
| 5 |
+
const container = document.getElementById('products-container');
|
| 6 |
+
data.products.forEach(product => {
|
| 7 |
+
const productDiv = document.createElement('div');
|
| 8 |
+
productDiv.className = 'product';
|
| 9 |
+
productDiv.innerHTML = `
|
| 10 |
+
<img src="${product.image}" alt="${product.name}">
|
| 11 |
+
<h2>${product.name}</h2>
|
| 12 |
+
<p>${product.details}</p>
|
| 13 |
+
<p>Price: $${product.price}</p>
|
| 14 |
+
<select>
|
| 15 |
+
<option value="1">1</option>
|
| 16 |
+
<option value="2">2</option>
|
| 17 |
+
<option value="3">3</option>
|
| 18 |
+
</select>
|
| 19 |
+
<select>
|
| 20 |
+
${product.locations.map(loc => `<option value="${loc}">${loc}</option>`).join('')}
|
| 21 |
+
</select>
|
| 22 |
+
<button>Add to Cart</button>
|
| 23 |
+
`;
|
| 24 |
+
container.appendChild(productDiv);
|
| 25 |
+
});
|
| 26 |
+
});
|
| 27 |
+
});
|
templates/style.css
ADDED
|
@@ -0,0 +1,42 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
body {
|
| 2 |
+
font-family: Arial, sans-serif;
|
| 3 |
+
}
|
| 4 |
+
|
| 5 |
+
h1 {
|
| 6 |
+
text-align: center;
|
| 7 |
+
}
|
| 8 |
+
|
| 9 |
+
#products-container {
|
| 10 |
+
display: flex;
|
| 11 |
+
flex-wrap: wrap;
|
| 12 |
+
justify-content: center;
|
| 13 |
+
}
|
| 14 |
+
|
| 15 |
+
.product {
|
| 16 |
+
border: 1px solid #ccc;
|
| 17 |
+
margin: 10px;
|
| 18 |
+
padding: 10px;
|
| 19 |
+
text-align: center;
|
| 20 |
+
width: 200px;
|
| 21 |
+
}
|
| 22 |
+
|
| 23 |
+
.product img {
|
| 24 |
+
max-width: 100%;
|
| 25 |
+
}
|
| 26 |
+
|
| 27 |
+
.product button {
|
| 28 |
+
background-color: #4CAF50;
|
| 29 |
+
color: white;
|
| 30 |
+
border: none;
|
| 31 |
+
padding: 10px;
|
| 32 |
+
text-align: center;
|
| 33 |
+
text-decoration: none;
|
| 34 |
+
display: inline-block;
|
| 35 |
+
font-size: 16px;
|
| 36 |
+
margin: 4px 2px;
|
| 37 |
+
cursor: pointer;
|
| 38 |
+
}
|
| 39 |
+
|
| 40 |
+
.product button:hover {
|
| 41 |
+
background-color: #45a049;
|
| 42 |
+
}
|