Update app.py

app.py

@@ -1,4 +1,4 @@
-from flask import Flask, render_template_string, request, redirect, url_for, abort
+from flask import Flask, render_template_string, request, redirect, url_for
 import json
 import os
 import logging
@@ -11,7 +11,6 @@ from werkzeug.utils import secure_filename
 
 app = Flask(__name__)
 DATA_FILE = 'products.json'
-MAX_PHOTOS = 5  # Максимальное количество фото на товар
 
 # Настройки Hugging Face
 REPO_ID = "flpolprojects/Clients"
@@ -101,7 +100,6 @@ def catalog():
                 padding: 0;
                 box-sizing: border-box;
             }
-
             body {
                 font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
                 background-color: #f5f5f5;
@@ -109,12 +107,10 @@ def catalog():
                 line-height: 1.6;
                 padding: 20px;
             }
-
             .container {
                 max-width: 1200px;
                 margin: 0 auto;
             }
-
             h1 {
                 text-align: center;
                 color: #2c3e50;
@@ -122,14 +118,12 @@ def catalog():
                 font-size: 2.5em;
                 font-weight: 700;
             }
-
             .products-grid {
                 display: grid;
                 grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
                 gap: 20px;
                 padding: 0 15px;
             }
-
             .product {
                 background: #ffffff;
                 border-radius: 12px;
@@ -139,12 +133,10 @@ def catalog():
                 flex-direction: column;
                 box-shadow: 0 2px 15px rgba(0, 0, 0, 0.1);
             }
-
             .product:hover {
                 transform: translateY(-5px);
                 box-shadow: 0 5px 25px rgba(0, 0, 0, 0.15);
             }
-
             .product-image {
                 width: 100%;
                 height: 200px;
@@ -152,39 +144,33 @@ def catalog():
                 border-radius: 8px;
                 margin-bottom: 15px;
             }
-
             .product-image img {
                 width: 100%;
                 height: 100%;
                 object-fit: cover;
                 transition: transform 0.3s ease;
             }
-
             .product-image img:hover {
                 transform: scale(1.05);
             }
-
             .product h2 {
                 font-size: 1.2em;
                 color: #2c3e50;
                 margin-bottom: 10px;
                 font-weight: 600;
             }
-
             .product-price {
                 font-size: 1.3em;
                 color: #e74c3c;
                 font-weight: 700;
                 margin: 10px 0;
             }
-
             .product-description {
                 color: #7f8c8d;
                 font-size: 0.9em;
                 flex-grow: 1;
                 margin-bottom: 15px;
             }
-
             .product-button {
                 background-color: #3498db;
                 color: white;
@@ -198,52 +184,41 @@ def catalog():
                 display: inline-block;
                 font-weight: 500;
             }
-
             .product-button:hover {
                 background-color: #2980b9;
             }
-
             @media (max-width: 768px) {
                 .products-grid {
                     grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
                     gap: 10px;
                 }
-
                 body {
                     padding: 10px;
                 }
-
                 h1 {
                     font-size: 1.8em;
                     margin-bottom: 20px;
                 }
-
                 .product {
                     padding: 10px;
                 }
-
                 .product-image {
                     height: 120px;
                 }
-
                 .product h2 {
                     font-size: 1em;
                 }
-
                 .product-price {
                     font-size: 1.1em;
                 }
-
                 .product-description {
                     font-size: 0.8em;
                 }
-
                 .product-button {
                     padding: 8px 15px;
                     font-size: 0.9em;
                 }
             }
-
             @keyframes fadeIn {
                 from {
                     opacity: 0;
@@ -254,24 +229,19 @@ def catalog():
                     transform: translateY(0);
                 }
             }
-
             .product {
                 animation: fadeIn 0.5s ease-out forwards;
             }
-
             ::-webkit-scrollbar {
                 width: 8px;
             }
-
             ::-webkit-scrollbar-track {
                 background: #f1f1f1;
             }
-
             ::-webkit-scrollbar-thumb {
                 background: #888;
                 border-radius: 4px;
             }
-
             ::-webkit-scrollbar-thumb:hover {
                 background: #555;
             }
@@ -282,19 +252,21 @@ def catalog():
             <h1>Каталог товаров</h1>
             <div class="products-grid">
                 {% for product in products %}
-                <div class="product">
-                    {% if product.get('photos') and product['photos'] %}
-                    <div class="product-image">
-                        <img src="https://huggingface.co/datasets/{{ repo_id }}/resolve/main/photos/{{ product['photos'][0] }}" 
-                             alt="{{ product['name'] }}"
-                             loading="lazy">
+                <a href="{{ url_for('product_detail', index=loop.index0) }}" style="text-decoration: none; color: inherit;">
+                    <div class="product">
+                        {% if product.get('photos') and product['photos']|length > 0 %}
+                        <div class="product-image">
+                            <img src="https://huggingface.co/datasets/{{ repo_id }}/resolve/main/photos/{{ product['photos'][0] }}" 
+                                 alt="{{ product['name'] }}"
+                                 loading="lazy">
+                        </div>
+                        {% endif %}
+                        <h2>{{ product['name'] }}</h2>
+                        <div class="product-price">{{ product['price'] }} ₽</div>
+                        <p class="product-description">{{ product['description'][:100] }}{% if product['description']|length > 100 %}...{% endif %}</p>
+                        <div class="product-button">Подробнее</div>
                     </div>
-                    {% endif %}
-                    <h2>{{ product['name'] }}</h2>
-                    <div class="product-price">{{ product['price'] }} ₽</div>
-                    <p class="product-description">{{ product['description'] }}</p>
-                    <a href="{{ url_for('product', product_id=loop.index0) }}" class="product-button">Подробнее</a>
-                </div>
+                </a>
                 {% endfor %}
             </div>
         </div>
@@ -303,15 +275,14 @@ def catalog():
     '''
     return render_template_string(catalog_html, products=products, repo_id=REPO_ID)
 
-@app.route('/product/<int:product_id>')
-def product(product_id):
+@app.route('/product/<int:index>')
+def product_detail(index):
     products = load_data()
     try:
-        product = products[product_id]
+        product = products[index]
     except IndexError:
-        abort(404)
-    
-    product_html = '''
+        return "Продукт не найден", 404
+    detail_html = '''
     <!DOCTYPE html>
     <html lang="ru">
     <head>
@@ -319,126 +290,90 @@ def product(product_id):
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
         <title>{{ product['name'] }}</title>
         <style>
-            * {
-                margin: 0;
-                padding: 0;
-                box-sizing: border-box;
-            }
-
             body {
-                font-family: Arial, sans-serif;
-                line-height: 1.6;
-                background-color: #f4f4f4;
+                font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+                background-color: #f5f5f5;
                 color: #333;
                 padding: 20px;
             }
-
             .container {
-                max-width: 900px;
+                max-width: 800px;
                 margin: 0 auto;
+                background: #fff;
+                padding: 20px;
+                border-radius: 8px;
+                box-shadow: 0 2px 15px rgba(0, 0, 0, 0.1);
             }
-
             h1 {
-                text-align: center;
-                margin-bottom: 30px;
-                color: #3498db;
+                margin-bottom: 20px;
             }
-
-            .product-gallery {
+            .photos {
                 display: flex;
                 flex-wrap: wrap;
-                justify-content: center;
+                gap: 10px;
                 margin-bottom: 20px;
             }
-
-            .product-gallery img {
-                width: 200px;
-                height: 200px;
-                object-fit: cover;
-                margin: 10px;
-                border-radius: 8px;
-                box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
-            }
-
-            .product-description {
-                background-color: #fff;
-                padding: 20px;
-                border-radius: 8px;
-                box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
-            }
-
-            .product-description h2 {
-                color: #3498db;
-                margin-bottom: 15px;
+            .photos img {
+                width: calc(50% - 10px);
+                height: auto;
+                border-radius: 5px;
             }
-
-            .product-description p {
-                font-size: 1.1em;
-                line-height: 1.7;
+            @media (max-width: 600px) {
+                .photos img {
+                    width: 100%;
+                }
             }
-
             .back-button {
                 display: inline-block;
-                padding: 10px 20px;
+                margin-top: 20px;
+                padding: 10px 15px;
                 background-color: #3498db;
                 color: white;
                 text-decoration: none;
                 border-radius: 5px;
-                transition: background-color 0.3s;
-                margin-top: 20px;
-            }
-
-            .back-button:hover {
-                background-color: #2980b9;
             }
         </style>
     </head>
     <body>
         <div class="container">
             <h1>{{ product['name'] }}</h1>
-            <div class="product-gallery">
-                {% if product.get('photos') and product['photos'] %}
+            <div class="photos">
+                {% if product.get('photos') %}
                     {% for photo in product['photos'] %}
-                        <img src="https://huggingface.co/datasets/{{ repo_id }}/resolve/main/photos/{{ photo }}" alt="{{ product['name'] }}">
+                    <img src="https://huggingface.co/datasets/{{ repo_id }}/resolve/main/photos/{{ photo }}" alt="{{ product['name'] }}">
                     {% endfor %}
-                {% else %}
-                    <p>Нет доступных фотографий.</p>
                 {% endif %}
             </div>
-            <div class="product-description">
-                <h2>Описание товара</h2>
-                <p>{{ product['description'] }}</p>
-                <p><strong>Цена:</strong> {{ product['price'] }} ₽</p>
-            </div>
-            <a href="{{ url_for('catalog') }}" class="back-button">Вернуться в каталог</a>
+            <p><strong>Цена:</strong> {{ product['price'] }} ₽</p>
+            <p><strong>Описание:</strong> {{ product['description'] }}</p>
+            <a href="{{ url_for('catalog') }}" class="back-button">Назад к каталогу</a>
         </div>
     </body>
     </html>
     '''
-    return render_template_string(product_html, product=product, repo_id=REPO_ID)
+    return render_template_string(detail_html, product=product, repo_id=REPO_ID)
 
 @app.route('/admin', methods=['GET', 'POST'])
 def admin():
     products = load_data()
     if request.method == 'POST':
         action = request.form.get('action')
-
         if action == 'add':
             name = request.form.get('name')
             price = request.form.get('price')
             description = request.form.get('description')
-            photos = request.files.getlist('photos')
-
-            photo_filenames = []
-            if photos:
-                for photo in photos[:MAX_PHOTOS]:
-                    if photo.filename:
+            photos_files = request.files.getlist('photos')
+            photos_list = []
+            if photos_files:
+                if len(photos_files) > 5:
+                    photos_files = photos_files[:5]
+                for photo in photos_files:
+                    if photo and photo.filename:
                         photo_filename = secure_filename(photo.filename)
                         uploads_dir = 'uploads'
                         os.makedirs(uploads_dir, exist_ok=True)
                         temp_path = os.path.join(uploads_dir, photo_filename)
                         photo.save(temp_path)
-
                         try:
                             api = HfApi()
                             api.upload_file(
@@ -449,47 +384,44 @@ def admin():
                                 token=HF_TOKEN_WRITE,
                                 commit_message=f"Добавлено фото для товара {name}"
                             )
-                            photo_filenames.append(photo_filename)
+                            photos_list.append(photo_filename)
                         except Exception as e:
                             logging.error(f"Ошибка при загрузке фото: {e}")
+                            return f"Ошибка при загрузке фото: {e}", 500
                         finally:
                             os.remove(temp_path)
-
             if name and price and description:
                 try:
                     price = float(price.replace(',', '.'))
                 except ValueError:
                     return "Ошибка: Цена должна быть числом.", 400
-
                 product = {
                     'name': name,
                     'price': price,
                     'description': description,
-                    'photos': photo_filenames
+                    'photos': photos_list
                 }
-
                 products.append(product)
                 save_data(products)
                 return redirect(url_for('admin'))
-
         elif action == 'edit':
             index = int(request.form.get('index'))
             name = request.form.get('name')
             price = request.form.get('price')
             description = request.form.get('description')
-            photos = request.files.getlist('photos')
-
-            photo_filenames = products[index].get('photos', [])  # Сохраняем текущие фото
-
-            if photos:
-                for photo in photos[:MAX_PHOTOS]:
-                    if photo.filename:
+            photos_files = request.files.getlist('photos')
+            # Если загружены новые фото, обновляем список фотографий товара
+            if photos_files and any(photo.filename for photo in photos_files):
+                new_photos_list = []
+                if len(photos_files) > 5:
+                    photos_files = photos_files[:5]
+                for photo in photos_files:
+                    if photo and photo.filename:
                         photo_filename = secure_filename(photo.filename)
                         uploads_dir = 'uploads'
                         os.makedirs(uploads_dir, exist_ok=True)
                         temp_path = os.path.join(uploads_dir, photo_filename)
                         photo.save(temp_path)
-
                         try:
                             api = HfApi()
                             api.upload_file(
@@ -500,12 +432,13 @@ def admin():
                                 token=HF_TOKEN_WRITE,
                                 commit_message=f"Обновлено фото для товара {name}"
                             )
-                            photo_filenames.append(photo_filename)
+                            new_photos_list.append(photo_filename)
                         except Exception as e:
                             logging.error(f"Ошибка при загрузке фото: {e}")
+                            return f"Ошибка при загрузке фото: {e}", 500
                         finally:
                             os.remove(temp_path)
-
+                products[index]['photos'] = new_photos_list
             products[index]['name'] = name
             try:
                 price = float(price.replace(',', '.'))
@@ -513,17 +446,13 @@ def admin():
                 return "Ошибка: Цена должна быть числом.", 400
             products[index]['price'] = price
             products[index]['description'] = description
-            products[index]['photos'] = photo_filenames[:MAX_PHOTOS]  # Обновляем список фото, ограничивая MAX_PHOTOS
-
             save_data(products)
             return redirect(url_for('admin'))
-
         elif action == 'delete':
             index = int(request.form.get('index'))
             del products[index]
             save_data(products)
             return redirect(url_for('admin'))
-
     admin_html = '''
     <!DOCTYPE html>
     <html lang="ru">
@@ -545,7 +474,7 @@ def admin():
                 padding: 20px;
                 border: 1px solid #ddd;
                 border-radius: 5px;
-                max-width: 100%; /* Make form responsive */
+                max-width: 100%;
                 margin-bottom: 20px;
             }
             label {
@@ -559,7 +488,7 @@ def admin():
                 margin-top: 5px;
                 border: 1px solid #ddd;
                 border-radius: 4px;
-                box-sizing: border-box; /* Include padding and border in the element's total width and height */
+                box-sizing: border-box;
             }
             button {
                 margin-top: 15px;
@@ -590,8 +519,6 @@ def admin():
                 border-radius: 5px;
                 background-color: #f9f9f9;
             }
-
-            /* Media query for mobile devices */
             @media (max-width: 600px) {
                 body {
                     margin: 10px;
@@ -609,20 +536,6 @@ def admin():
                     margin-bottom: 10px;
                 }
             }
-
-            .product-photos {
-                display: flex;
-                flex-wrap: wrap;
-                margin-top: 10px;
-            }
-
-            .product-photos img {
-                max-width: 50px;
-                max-height: 50px;
-                margin-right: 5px;
-                border: 1px solid #ddd;
-                padding: 2px;
-            }
         </style>
     </head>
     <body>
@@ -631,16 +544,12 @@ def admin():
             <input type="hidden" name="action" value="add">
             <label for="name">Название товара:</label>
             <input type="text" id="name" name="name" required>
-
             <label for="price">Цена:</label>
             <input type="number" id="price" name="price" step="0.01" required>
-
             <label for="description">Описание:</label>
             <textarea id="description" name="description" rows="4" required></textarea>
-
             <label for="photos">Фотографии товара (до 5):</label>
             <input type="file" id="photos" name="photos" accept="image/*" multiple>
-
             <button type="submit">Добавить товар</button>
         </form>
 
@@ -660,13 +569,11 @@ def admin():
                 <h3>{{ product['name'] }}</h3>
                 <p><strong>Цена:</strong> {{ product['price'] }} руб.</p>
                 <p><strong>Описание:</strong> {{ product['description'] }}</p>
-                <div class="product-photos">
-                    {% if product.get('photos') and product['photos'] %}
-                        {% for photo in product['photos'] %}
-                            <img src="https://huggingface.co/datasets/{{ repo_id }}/resolve/main/photos/{{ photo }}" alt="{{ product['name'] }}">
-                        {% endfor %}
-                    {% endif %}
-                </div>
+                {% if product.get('photos') and product['photos']|length > 0 %}
+                    <img src="https://huggingface.co/datasets/{{ repo_id }}/resolve/main/photos/{{ product['photos'][0] }}" 
+                         alt="{{ product['name'] }}" 
+                         style="max-width: 100px;">
+                {% endif %}
 
                 <details>
                     <summary>Редактировать</summary>
@@ -675,16 +582,12 @@ def admin():
                         <input type="hidden" name="index" value="{{ loop.index0 }}">
                         <label for="name">Название товара:</label>
                         <input type="text" id="name" name="name" value="{{ product['name'] }}" required>
-
                         <label for="price">Цена:</label>
                         <input type="number" id="price" name="price" step="0.01" value="{{ product['price'] }}" required>
-
                         <label for="description">Описание:</label>
                         <textarea id="description" name="description" rows="4" required>{{ product['description'] }}</textarea>
-
                         <label for="photos">Фотографии товара (до 5):</label>
                         <input type="file" id="photos" name="photos" accept="image/*" multiple>
-
                         <button type="submit">Сохранить изменения</button>
                     </form>
                 </details>
@@ -721,4 +624,4 @@ if __name__ == '__main__':
     except Exception as e:
         logging.error(f"Не удалось загрузить базу данных при запуске: {e}")
 
-    app.run(debug=True, host='0.0.0.0', port=7860)
+    app.run(debug=True, host='0.0.0.0', port=7860)