Hugging Face's logo

Spaces:
rein0421
/
AIdentify
Running

App Files
rein0421 commited on
Commit
cad90be
·
verified ·
1 Parent(s): 15c2100

Update app.py

Browse files
Files changed (1) hide show
  1. app.py +57 -54
app.py CHANGED
@@ -798,7 +798,7 @@ async def create_mask_sum(image: UploadFile = File(...), risk_level: int = Form(
798
  @app.get("/", response_class=HTMLResponse)
799
  async def read_root():
800
  html_content = """
801
- <!DOCTYPE html>
802
  <html lang="ja">
803
  <head>
804
  <meta charset="UTF-8">
@@ -873,12 +873,10 @@ async def read_root():
873
  <body>
874
  <div class="container">
875
  <h1><i class="fas fa-image"></i> 画像処理アプリ - モザイクとインペイント</h1>
876
-
877
  <div class="form-group">
878
  <input type="file" id="uploadImage" class="form-control-file" accept="image/*" onchange="previewImage()">
879
  </div>
880
  <img id="uploadedImage" class="image-preview" src="#" alt="アップロードされた画像" style="display: none;">
881
-
882
  <div class="form-group mt-4">
883
  <label for="processingType">処理方法を選択:</label>
884
  <select id="processingType" class="custom-select">
@@ -888,33 +886,28 @@ async def read_root():
888
  <option value="mosaic">mosaicインペイント</option>
889
  </select>
890
  </div>
891
-
892
  <div class="slider-container">
893
  <label for="riskLevel" class="slider-label">リスクレベル (0-100): <span id="riskLevelLabel">50</span></label>
894
  <div id="slider"></div>
895
  </div>
896
-
897
  <button class="btn btn-primary mt-4" onclick="processImage()">処理開始</button>
898
-
899
  <div id="result" class="mt-5">
900
  <h2>処理結果:</h2>
901
  <img id="processedImage" class="processed-preview" src="" alt="">
902
  <a id="downloadLink" class="btn btn-success mt-3" href="#" download="processed_image.jpg">処理された画像をダウンロード</a>
903
  </div>
904
  </div>
905
-
906
  <!-- jQuery and Bootstrap JS -->
907
  <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
908
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
909
  <!-- jQuery UI -->
910
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
911
-
912
  <script>
913
  $(function() {
914
  // スライダーの設定
915
  $("#slider").slider({
916
  range: "min",
917
- value: 50, // 初期値
918
  min: 0,
919
  max: 100,
920
  slide: function(event, ui) {
@@ -926,74 +919,84 @@ async def read_root():
926
  function previewImage() {
927
  const fileInput = document.getElementById('uploadImage');
928
  const uploadedImage = document.getElementById('uploadedImage');
929
-
930
  if (fileInput.files && fileInput.files[0]) {
931
  const reader = new FileReader();
932
  reader.onload = function (e) {
933
- uploadedImage.src = e.target.result;
934
- uploadedImage.style.display = 'block';
 
 
 
 
 
 
 
 
 
 
935
  };
936
  reader.readAsDataURL(fileInput.files[0]);
937
  }
938
  }
939
 
940
  function processImage() {
941
- const fileInput = document.getElementById('uploadImage');
942
  const processingType = document.getElementById('processingType').value;
943
- const riskLevel = $("#slider").slider("value"); // スライダーから値を取得
944
  const resultDiv = document.getElementById('result');
945
  const processedImage = document.getElementById('processedImage');
946
  const downloadLink = document.getElementById('downloadLink');
 
947
 
948
- if (fileInput.files.length === 0) {
949
  alert("画像を選択してください。");
950
  return;
951
  }
952
 
953
- const file = fileInput.files[0];
954
- const formData = new FormData();
955
- formData.append('image', file);
956
- formData.append('risk_level', riskLevel); // リスクレベルを追加
957
-
958
- let apiEndpoint;
959
- if (processingType === "opencv") {
960
- apiEndpoint = "/create-mask-and-inpaint-opencv";
961
- } else if (processingType === "simple_lama") {
962
- apiEndpoint = "/create-mask-and-inpaint-simple-lama";
963
- } else if (processingType === "stamp") {
964
- apiEndpoint = "/create-mask-and-inpaint-stamp";
965
- } else if (processingType=="mosaic"){
966
- apiEndpoint = "/create-mask-and-inpaint-mosaic";
967
- }
968
-
969
- const url = "https://rein0421-aidentify.hf.space" + apiEndpoint;
970
-
971
- fetch(url, {
972
- method: 'POST',
973
- body: formData
974
- })
975
- .then(response => {
976
- if (!response.ok) {
977
- throw new Error("Network response was not ok");
978
- }
979
- return response.blob();
980
- })
981
- .then(blob => {
982
- const objectURL = URL.createObjectURL(blob);
983
- processedImage.src = objectURL;
984
- downloadLink.href = objectURL;
985
- resultDiv.style.display = "block";
986
- })
987
- .catch(error => {
988
- console.error("画像処理に失敗しました。", error);
989
- alert("画像処理に失敗しました。");
990
- });
 
 
991
  }
992
  </script>
993
  </body>
994
  </html>
995
 
996
-
997
  """
998
  return HTMLResponse(content=html_content)
999
  if __name__ == "__main__":
 
798
  @app.get("/", response_class=HTMLResponse)
799
  async def read_root():
800
  html_content = """
801
+ <!DOCTYPE html>
802
  <html lang="ja">
803
  <head>
804
  <meta charset="UTF-8">
 
873
  <body>
874
  <div class="container">
875
  <h1><i class="fas fa-image"></i> 画像処理アプリ - モザイクとインペイント</h1>
 
876
  <div class="form-group">
877
  <input type="file" id="uploadImage" class="form-control-file" accept="image/*" onchange="previewImage()">
878
  </div>
879
  <img id="uploadedImage" class="image-preview" src="#" alt="アップロードされた画像" style="display: none;">
 
880
  <div class="form-group mt-4">
881
  <label for="processingType">処理方法を選択:</label>
882
  <select id="processingType" class="custom-select">
 
886
  <option value="mosaic">mosaicインペイント</option>
887
  </select>
888
  </div>
 
889
  <div class="slider-container">
890
  <label for="riskLevel" class="slider-label">リスクレベル (0-100): <span id="riskLevelLabel">50</span></label>
891
  <div id="slider"></div>
892
  </div>
 
893
  <button class="btn btn-primary mt-4" onclick="processImage()">処理開始</button>
 
894
  <div id="result" class="mt-5">
895
  <h2>処理結果:</h2>
896
  <img id="processedImage" class="processed-preview" src="" alt="">
897
  <a id="downloadLink" class="btn btn-success mt-3" href="#" download="processed_image.jpg">処理された画像をダウンロード</a>
898
  </div>
899
  </div>
 
900
  <!-- jQuery and Bootstrap JS -->
901
  <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
902
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
903
  <!-- jQuery UI -->
904
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
 
905
  <script>
906
  $(function() {
907
  // スライダーの設定
908
  $("#slider").slider({
909
  range: "min",
910
+ value: 50,
911
  min: 0,
912
  max: 100,
913
  slide: function(event, ui) {
 
919
  function previewImage() {
920
  const fileInput = document.getElementById('uploadImage');
921
  const uploadedImage = document.getElementById('uploadedImage');
 
922
  if (fileInput.files && fileInput.files[0]) {
923
  const reader = new FileReader();
924
  reader.onload = function (e) {
925
+ const img = new Image();
926
+ img.onload = function() {
927
+ const canvas = document.createElement('canvas');
928
+ const ctx = canvas.getContext('2d');
929
+ canvas.width = 640;
930
+ canvas.height = 480;
931
+ ctx.drawImage(img, 0, 0, 640, 480);
932
+ uploadedImage.src = canvas.toDataURL('image/jpeg');
933
+ uploadedImage.style.display = 'block';
934
+ uploadedImage.dataset.resizedImage = uploadedImage.src;
935
+ };
936
+ img.src = e.target.result;
937
  };
938
  reader.readAsDataURL(fileInput.files[0]);
939
  }
940
  }
941
 
942
  function processImage() {
 
943
  const processingType = document.getElementById('processingType').value;
944
+ const riskLevel = $("#slider").slider("value");
945
  const resultDiv = document.getElementById('result');
946
  const processedImage = document.getElementById('processedImage');
947
  const downloadLink = document.getElementById('downloadLink');
948
+ const resizedImageDataURL = document.getElementById('uploadedImage').dataset.resizedImage;
949
 
950
+ if (!resizedImageDataURL) {
951
  alert("画像を選択してください。");
952
  return;
953
  }
954
 
955
+ fetch(resizedImageDataURL)
956
+ .then(res => res.blob())
957
+ .then(blob => {
958
+ const formData = new FormData();
959
+ formData.append('image', blob, 'resized_image.jpg');
960
+ formData.append('risk_level', riskLevel);
961
+
962
+ let apiEndpoint;
963
+ if (processingType === "opencv") {
964
+ apiEndpoint = "/create-mask-and-inpaint-opencv";
965
+ } else if (processingType === "simple_lama") {
966
+ apiEndpoint = "/create-mask-and-inpaint-simple-lama";
967
+ } else if (processingType === "stamp") {
968
+ apiEndpoint = "/create-mask-and-inpaint-stamp";
969
+ } else if (processingType === "mosaic") {
970
+ apiEndpoint = "/create-mask-and-inpaint-mosaic";
971
+ }
972
+ const url = "https://rein0421-aidentify.hf.space" + apiEndpoint;
973
+
974
+ fetch(url, {
975
+ method: 'POST',
976
+ body: formData
977
+ })
978
+ .then(response => {
979
+ if (!response.ok) {
980
+ throw new Error("Network response was not ok");
981
+ }
982
+ return response.blob();
983
+ })
984
+ .then(blob => {
985
+ const objectURL = URL.createObjectURL(blob);
986
+ processedImage.src = objectURL;
987
+ downloadLink.href = objectURL;
988
+ resultDiv.style.display = "block";
989
+ })
990
+ .catch(error => {
991
+ console.error("画像処理に失敗しました。", error);
992
+ alert("画像処理に失敗しました。");
993
+ });
994
+ });
995
  }
996
  </script>
997
  </body>
998
  </html>
999
 
 
1000
  """
1001
  return HTMLResponse(content=html_content)
1002
  if __name__ == "__main__":