前端界面(Web UI)
    ↓
API網(wǎng)關(guān)層(Flask Routes)
    ↓
業(yè)務(wù)邏輯層(Service Layer)
    ├── 圖像預(yù)處理模塊
    ├── 風(fēng)格遷移模塊
    ├── 后處理模塊
    └── 存儲(chǔ)管理模塊
    ↓
數(shù)據(jù)層(Database & File Storage)

style-transfer-project/
│
├── app/
│   ├── __init__.py
│   ├── models.py          # 數(shù)據(jù)庫模型
│   ├── routes.py          # API路由
│   ├── style_transfer.py  # 風(fēng)格遷移核心代碼
│   └── utils.py           # 工具函數(shù)
│
├── static/
│   ├── css/
│   ├── js/
│   └── uploads/           # 上傳的圖片
│
├── templates/
│   └── index.html
│
├── models/
│   └── vgg19_weights.h5   # 預(yù)訓(xùn)練模型
│
├── config.py              # 配置文件
├── requirements.txt
└── run.py                 # 啟動(dòng)文件

import tensorflow as tf
from tensorflow.keras.applications import VGG19
from tensorflow.keras.preprocessing import image
import numpy as np

class StyleTransfer:
    def __init__(self):
        # 加載VGG19模型
        self.model = VGG19(include_top=False, weights='imagenet')
        self.model.trainable = False
        
        # 定義內(nèi)容層和風(fēng)格層
        self.content_layers = ['block5_conv2']
        self.style_layers = ['block1_conv1', 'block2_conv1', 
                            'block3_conv1', 'block4_conv1', 
                            'block5_conv1']
        
    def preprocess_image(self, img_path):
        """圖像預(yù)處理"""
        img = image.load_img(img_path, target_size=(512, 512))
        img = image.img_to_array(img)
        img = np.expand_dims(img, axis=0)
        img = tf.keras.applications.vgg19.preprocess_input(img)
        return img
    
    def deprocess_image(self, processed_img):
        """圖像后處理"""
        img = processed_img.copy()
        if len(img.shape) == 4:
            img = np.squeeze(img, 0)
        
        # 反歸一化
        img[:, :, 0] += 103.939
        img[:, :, 1] += 116.779
        img[:, :, 2] += 123.68
        img = img[:, :, ::-1]  # BGR to RGB
        
        img = np.clip(img, 0, 255).astype('uint8')
        return img
    
    def compute_content_loss(self, content_output, generated_output):
        """計(jì)算內(nèi)容損失"""
        return tf.reduce_mean(tf.square(content_output - generated_output))
    
    def gram_matrix(self, input_tensor):
        """計(jì)算Gram矩陣"""
        result = tf.linalg.einsum('bijc,bijd->bcd', input_tensor, input_tensor)
        input_shape = tf.shape(input_tensor)
        num_locations = tf.cast(input_shape[1] * input_shape[2], tf.float32)
        return result / num_locations
    
    def compute_style_loss(self, style_outputs, generated_outputs):
        """計(jì)算風(fēng)格損失"""
        style_loss = 0
        for style_output, generated_output in zip(style_outputs, generated_outputs):
            style_gram = self.gram_matrix(style_output)
            generated_gram = self.gram_matrix(generated_output)
            style_loss += tf.reduce_mean(tf.square(style_gram - generated_gram))
        return style_loss
    
    def transfer_style(self, content_path, style_path, 
                      num_iterations=1000, 
                      content_weight=1e3, 
                      style_weight=1e-2):
        """執(zhí)行風(fēng)格遷移"""
        # 加載和預(yù)處理圖像
        content_image = self.preprocess_image(content_path)
        style_image = self.preprocess_image(style_path)
        
        # 創(chuàng)建特征提取模型
        outputs = [self.model.get_layer(name).output 
                  for name in self.style_layers + self.content_layers]
        feature_extractor = tf.keras.Model([self.model.input], outputs)
        
        # 提取風(fēng)格和內(nèi)容特征
        style_features = feature_extractor(style_image)[:len(self.style_layers)]
        content_features = feature_extractor(content_image)[len(self.style_layers):]
        
        # 初始化生成圖像
        generated_image = tf.Variable(content_image, dtype=tf.float32)
        
        # 優(yōu)化器
        optimizer = tf.optimizers.Adam(learning_rate=0.02)
        
        @tf.function
        def train_step():
            with tf.GradientTape() as tape:
                outputs = feature_extractor(generated_image)
                style_outputs = outputs[:len(self.style_layers)]
                content_outputs = outputs[len(self.style_layers):]
                
                # 計(jì)算損失
                content_loss = self.compute_content_loss(
                    content_features[0], content_outputs[0]
                )
                style_loss = self.compute_style_loss(
                    style_features, style_outputs
                )
                
                total_loss = content_weight * content_loss + style_weight * style_loss
            
            gradients = tape.gradient(total_loss, generated_image)
            optimizer.apply_gradients([(gradients, generated_image)])
            generated_image.assign(
                tf.clip_by_value(generated_image, -103.939, 255 - 103.939)
            )
            
            return total_loss, content_loss, style_loss
        
        # 訓(xùn)練循環(huán)
        for i in range(num_iterations):
            total_loss, content_loss, style_loss = train_step()
            
            if i % 100 == 0:
                print(f"Iteration {i}: Total Loss = {total_loss:.2f}")
        
        # 后處理并返回結(jié)果
        result_image = self.deprocess_image(generated_image.numpy())
        return result_image

from flask import Flask, request, jsonify, render_template
from werkzeug.utils import secure_filename
import os
from PIL import Image
import uuid
from app.style_transfer import StyleTransfer

app = Flask(__name__)
app.config['UPLOAD_FOLDER'] = 'static/uploads'
app.config['MAX_CONTENT_LENGTH'] = 16 * 1024 * 1024  # 16MB限制

style_transfer_model = StyleTransfer()

@app.route('/')
def index():
    return render_template('index.html')

@app.route('/api/transfer', methods=['POST'])
def transfer_style():
    """風(fēng)格遷移API接口"""
    try:
        # 檢查文件是否存在
        if 'content_image' not in request.files or 'style_image' not in request.files:
            return jsonify({'error': '請(qǐng)上傳內(nèi)容圖片和風(fēng)格圖片'}), 400
        
        content_file = request.files['content_image']
        style_file = request.files['style_image']
        
        # 生成唯一文件名
        content_filename = f"{uuid.uuid4().hex}_{secure_filename(content_file.filename)}"
        style_filename = f"{uuid.uuid4().hex}_{secure_filename(style_file.filename)}"
        
        # 保存上傳的文件
        content_path = os.path.join(app.config['UPLOAD_FOLDER'], content_filename)
        style_path = os.path.join(app.config['UPLOAD_FOLDER'], style_filename)
        
        content_file.save(content_path)
        style_file.save(style_path)
        
        # 獲取參數(shù)
        iterations = int(request.form.get('iterations', 1000))
        content_weight = float(request.form.get('content_weight', 1e3))
        style_weight = float(request.form.get('style_weight', 1e-2))
        
        # 執(zhí)行風(fēng)格遷移
        result_image = style_transfer_model.transfer_style(
            content_path, 
            style_path,
            num_iterations=iterations,
            content_weight=content_weight,
            style_weight=style_weight
        )
        
        # 保存結(jié)果
        result_filename = f"result_{uuid.uuid4().hex}.jpg"
        result_path = os.path.join(app.config['UPLOAD_FOLDER'], result_filename)
        Image.fromarray(result_image).save(result_path)
        
        return jsonify({
            'success': True,
            'result_url': f'/static/uploads/{result_filename}',
            'content_url': f'/static/uploads/{content_filename}',
            'style_url': f'/static/uploads/{style_filename}'
        })
        
    except Exception as e:
        return jsonify({'error': str(e)}), 500

@app.route('/api/history', methods=['GET'])
def get_history():
    """獲取歷史記錄"""
    # 從數(shù)據(jù)庫查詢歷史記錄
    # 這里簡(jiǎn)化處理,實(shí)際項(xiàng)目中需要實(shí)現(xiàn)完整的數(shù)據(jù)庫操作
    return jsonify({'history': []})

if __name__ == '__main__':
    app.run(debug=True, host='0.0.0.0', port=5000)

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>圖像風(fēng)格遷移系統(tǒng)</title>
    <link  rel="external nofollow"  rel="stylesheet">
    <style>
        .upload-area {
            border: 2px dashed #ccc;
            border-radius: 10px;
            padding: 40px;
            text-align: center;
            cursor: pointer;
            transition: all 0.3s;
        }
        .upload-area:hover {
            border-color: #007bff;
            background-color: #f8f9fa;
        }
        .preview-image {
            max-width: 100%;
            max-height: 300px;
            margin-top: 20px;
            border-radius: 10px;
            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
        }
        .loading-spinner {
            display: none;
        }
    </style>
</head>
<body>
    <div class="container mt-5">
        <h1 class="text-center mb-5">?? 圖像風(fēng)格遷移系統(tǒng)</h1>
        
        <div class="row">
            <div class="col-md-6 mb-4">
                <h4>內(nèi)容圖片</h4>
                <div class="upload-area" onclick="document.getElementById('contentInput').click()">
                    <input type="file" id="contentInput" accept="image/*" style="display:none">
                    <p>點(diǎn)擊或拖拽上傳內(nèi)容圖片</p>
                </div>
                <img id="contentPreview" class="preview-image" style="display:none">
            </div>
            
            <div class="col-md-6 mb-4">
                <h4>風(fēng)格圖片</h4>
                <div class="upload-area" onclick="document.getElementById('styleInput').click()">
                    <input type="file" id="styleInput" accept="image/*" style="display:none">
                    <p>點(diǎn)擊或拖拽上傳風(fēng)格圖片</p>
                </div>
                <img id="stylePreview" class="preview-image" style="display:none">
            </div>
        </div>
        
        <div class="row mb-4">
            <div class="col-md-12">
                <h5>參數(shù)設(shè)置</h5>
                <div class="row">
                    <div class="col-md-4">
                        <label>迭代次數(shù)</label>
                        <input type="number" class="form-control" id="iterations" value="1000" min="100" max="5000">
                    </div>
                    <div class="col-md-4">
                        <label>內(nèi)容權(quán)重</label>
                        <input type="number" class="form-control" id="contentWeight" value="1000" step="100">
                    </div>
                    <div class="col-md-4">
                        <label>風(fēng)格權(quán)重</label>
                        <input type="number" class="form-control" id="styleWeight" value="0.01" step="0.001">
                    </div>
                </div>
            </div>
        </div>
        
        <div class="text-center mb-4">
            <button class="btn btn-primary btn-lg" onclick="startTransfer()">開始風(fēng)格遷移</button>
        </div>
        
        <div class="loading-spinner text-center" id="loadingSpinner">
            <div class="spinner-border text-primary" role="status">
                <span class="visually-hidden">處理中...</span>
            </div>
            <p class="mt-2">正在生成藝術(shù)作品,請(qǐng)稍候...</p>
        </div>
        
        <div id="resultSection" style="display:none" class="mt-5">
            <h4 class="text-center mb-4">生成結(jié)果</h4>
            <div class="text-center">
                <img id="resultImage" class="preview-image">
                <div class="mt-3">
                    <button class="btn btn-success" onclick="downloadResult()">下載結(jié)果</button>
                </div>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <script>
        let contentFile = null;
        let styleFile = null;
        let resultUrl = null;

        // 內(nèi)容圖片上傳
        document.getElementById('contentInput').addEventListener('change', function(e) {
            contentFile = e.target.files[0];
            const reader = new FileReader();
            reader.onload = function(event) {
                const preview = document.getElementById('contentPreview');
                preview.src = event.target.result;
                preview.style.display = 'block';
            };
            reader.readAsDataURL(contentFile);
        });

        // 風(fēng)格圖片上傳
        document.getElementById('styleInput').addEventListener('change', function(e) {
            styleFile = e.target.files[0];
            const reader = new FileReader();
            reader.onload = function(event) {
                const preview = document.getElementById('stylePreview');
                preview.src = event.target.result;
                preview.style.display = 'block';
            };
            reader.readAsDataURL(styleFile);
        });

        // 開始風(fēng)格遷移
        async function startTransfer() {
            if (!contentFile || !styleFile) {
                alert('請(qǐng)先上傳內(nèi)容圖片和風(fēng)格圖片');
                return;
            }

            const formData = new FormData();
            formData.append('content_image', contentFile);
            formData.append('style_image', styleFile);
            formData.append('iterations', document.getElementById('iterations').value);
            formData.append('content_weight', document.getElementById('contentWeight').value);
            formData.append('style_weight', document.getElementById('styleWeight').value);

            document.getElementById('loadingSpinner').style.display = 'block';
            document.getElementById('resultSection').style.display = 'none';

            try {
                const response = await axios.post('/api/transfer', formData, {
                    headers: {
                        'Content-Type': 'multipart/form-data'
                    }
                });

                if (response.data.success) {
                    resultUrl = response.data.result_url;
                    document.getElementById('resultImage').src = resultUrl;
                    document.getElementById('resultSection').style.display = 'block';
                }
            } catch (error) {
                alert('處理失敗: ' + error.message);
            } finally {
                document.getElementById('loadingSpinner').style.display = 'none';
            }
        }

        // 下載結(jié)果
        function downloadResult() {
            if (resultUrl) {
                const a = document.createElement('a');
                a.href = resultUrl;
                a.download = 'style_transfer_result.jpg';
                a.click();
            }
        }
    </script>
</body>
</html>

# 1. 克隆項(xiàng)目
git clone https://github.com/your-repo/style-transfer.git
cd style-transfer

# 2. 創(chuàng)建虛擬環(huán)境
python -m venv venv
source venv/bin/activate  # Windows: venv\Scripts\activate

# 3. 安裝依賴
pip install -r requirements.txt

# 4. 運(yùn)行應(yīng)用
python run.py

FROM python:3.9-slim

WORKDIR /app

COPY requirements.txt .
RUN pip install --no-cache-dir -r requirements.txt

COPY . .

EXPOSE 5000

CMD ["python", "run.py"]