Menu



Manage

Cord > Project_AI이미지 처리 전체 다운로드
Project_AI이미지 처리 > venv/templates/facechange.html Lines 167 | 6.8 KB
다운로드

                        <!DOCTYPE html>
<html>
<head>
    <title>start</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flask Bootstrap Example</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
    <style>
        rin {
            font-family: sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f4f4f4;
            color: #333;
            display: flex;
            flex-direction: column;
            align-items: center;

            footer {
            background-color: #333;
            color: #f4f4f4;
            padding: 20px;
            text-align: center;
            width: 100%;
            margin-top: 40px;
        }

        footer p {
            margin-bottom: 5px;
        }

        footer ul {
            list-style: none;
            padding: 0;
            margin: 0;
            display: flex;
            justify-content: center;
            bottom: 0;
        }

        footer ul li {
            margin: 0 10px;
        }

        footer ul li a {
            color: #f4f4f4;
            text-decoration: none;
            transition: color 0.3s ease;
        }

        footer ul li a:hover {
            color: #ddd;
        }
        }
    </style>
</head>
<body>
    <nav class="navbar navbar-expand-lg bg-body-tertiary">
        <div class="container-fluid">
            <a class="navbar-brand" href="{{ url_for('welcome') }}">
                <img src="../static/image/logo.png" alt="Stup" height="30">
            </a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarSupportedContent">
                <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                    <li class="nav-item">
                        <a class="nav-link" href="{{ url_for('nukki') }}" >누끼</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="{{ url_for('gray') }}">흑백화</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="{{ url_for('color') }}">색 부여</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="{{ url_for('upscale') }}">업스케일링</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="{{ url_for('facechange') }}" style="font-weight: bold;">얼굴변경</a>
                    </li>
                </ul>
                <div class="d-flex align-items-center">
                    <div class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                            {{ user_name }}님, 어서오세요!
                        </a>
                        <ul class="dropdown-menu">
                            <li><a class="dropdown-item" href="{{ url_for('userout') }}">회원탈퇴</a></li>
                            <li><a class="dropdown-item disabled" href="#">코인 충전 (비활성화)</a></li>
                            <li><hr class="dropdown-divider"></li>
                            <li><a class="dropdown-item" href="{{ url_for('logout') }}">로그아웃</a></li>
                        </ul>
                    </div>
                </div>
                &nbsp;
            </div>
        </div>
    </nav>
    
    <br>

    <div class="container" style="object-fit: cover;">
        <div class="row align-items-center flex-row">

            <div class="col-md-1"></div>

            <div class="col-md-10" style="border: 2px solid #dddddd; border-radius: 10px; padding: 10px; box-sizing: border-box; margin: 5pt">
                <h3>얼굴 변경</h3>
                <hr>
                <h6>
                    해당 기능은 테스트용으로 매우 오래 걸립니다.<br>
                    사용에 유의해주세요<br><br>
                    <div class="image-container" style="display: flex; justify-content: center;">
                        <img src="/static/image/war.png" alt="WARNING" style="max-width: 73.9%; height: auto; display: block; border: 1px solid #ddd; box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);">
                    </div>
                    <br><hr>
                    <form method="POST" enctype="multipart/form-data" action="{{ url_for('face_task') }}">
                        
                            
                        <label class="form-check-label" for="birefnet-hrsod">
                        얼굴이 바뀔 사진
                        </label><br>
                        <input type="file" id="imageInput" name="image1" accept="image/*">
                        <br><br>
                        <label class="form-check-label" for="birefnet-hrsod">
                        얼굴을 바꿀 사진
                        </label><br>
                        <input type="file" id="imageInput" name="image2" accept="image/*">
                        <br><br>
                        <button type="submit" class="btn btn-primary float-end">확인</button>
                    </form>
                    <br>
                    <hr>
                    <br>
                    결과:
                    <br>
                    <div class="container">
                        {% if result_image %}
                        <img src="{{ result_image }}" class="img-fluid" alt="얼굴 변경 결과 이미지">
                        {% else %}
                        <p>이미지를 업로드하고 확인 버튼을 누르세요.</p>
                        {% endif %}
                    </div>

                </h6>
            </div>
        </div>
    </div>

    <br><br><br>
    <rin>
        <footer>
            <p>© Cream Inc. 2025</p>
            <ul>
                <li><a href="#">Instagram</a></li>
                <li><a href="#">Email</a></li>
            </ul>
        </footer>
    </rin>
    
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
</body>
</html>