File size: 2,902 Bytes
11aa79a
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
<!DOCTYPE html>
<html>
  <head>
    <title>Remove Image Background</title>
  </head>
  <style>
    hr {
      border: none;
      border-top: 3px double #333;
      color: #333;
      overflow: visible;
      text-align: center;
      height: 5px;
    }

    hr::after {
      background: #fff;
      content: "📷";
      padding: 0 4px;
      position: relative;
      top: -13px;
    }

    form {
      padding: 10px;
      border: 1px solid #ddd;
      margin-bottom: 20px;
    }

    input[type="submit"] {
      background-color: #333;
      color: #fff;
      padding: 5px 10px;
      border: none;
      border-radius: 3px;
      cursor: pointer;
    }

    .drop-zone {
      border: 2px dashed #ccc;
      padding: 20px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      cursor: pointer;
    }

    .drop-zone.dragover {
      background-color: #f0f0f0;
    }
  </style>

  <body>
    <div id="dropZone" class="drop-zone">
      <h1>Remove Background from Images!</h1>
      <form
        id="upload_form"
        action="/remove"
        enctype="multipart/form-data"
        method="POST"
      >
        <input id="input_image" name="file" type="file" accept="image/*" />

        <label for="mask_only">Mask Only</label>
        <input
          type="checkbox"
          id="mask_only"
          name="mask_only"
          type="checkbox"
        />

        <label for="name_of_model">Choose a model:</label>

        <select name="name_of_model" id="name_of_model">
          <option value="u2net">U2Net</option>
          <option value="u2net_human_seg">U2Net Human Seg</option>
          <option value="u2net_cloth_seg">U2Net Cloth Seg</option>
          <option value="isnet-general-use">ISNET</option>
        </select>

        <input type="submit" />
      </form>

      <hr />

      {% if image %}
      <h1>Input Image</h1>
      <img src="data:image/jpeg;base64,{{ image }}" height="200" />
      {% else %} No Image Selected {% endif %} {% if output_img %}
      <h1>Output Image</h1>
      <img src="data:image/jpeg;base64,{{ output_img }}" height="200" />
      {% endif %}

      <h4>The available models are:</h4>
      <ul>
        <li><b>u2net:</b> A pre-trained model for general use cases.</li>
        <li>
          <b>u2net_human_seg:</b> A pre-trained model for human segmentation.
        </li>
        <li>
          <b>u2net_cloth_seg:</b> A pre-trained model for Cloths Parsing from
          human portrait. Here clothes are parsed into 3 category: Upper body,
          Lower body and Full body. isnet-general-use: A new pre-trained model
          for general use cases.
        </li>
        <li>
          <a
            href="https://github.com/danielgatis/rembg?tab=readme-ov-file#models"
            >Learn More</a
          >
        </li>
      </ul>
    </div>
  </body>
</html>