Hugging Face's logo

Spaces:
feng-x
/
ring-sizer
Sleeping

App Files Community
ring-sizer
File size: 5,041 Bytes
347d1a8
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
 
const form = document.getElementById("measureForm");
const imageInput = document.getElementById("imageInput");
const statusText = document.getElementById("statusText");
const inputPreview = document.getElementById("inputPreview");
const debugPreview = document.getElementById("debugPreview");
const inputFrame = document.getElementById("inputFrame");
const debugFrame = document.getElementById("debugFrame");
const jsonOutput = document.getElementById("jsonOutput");
const jsonLink = document.getElementById("jsonLink");
const defaultSampleUrl = window.DEFAULT_SAMPLE_URL || "";
const failReasonMessageMap = {
  card_not_detected:
    "Credit card not detected. Place a full card flat beside your hand.",
  hand_not_detected:
    "Hand not detected. Include your full palm in frame and keep fingers fully visible.",
  finger_isolation_failed:
    "Could not isolate the selected finger. Keep one target finger extended and separated.",
  finger_mask_too_small:
    "Finger region is too small. Move closer and use a higher-resolution photo.",
  contour_extraction_failed:
    "Finger contour extraction failed. Improve lighting and reduce background clutter.",
  axis_estimation_failed:
    "Finger axis estimation failed. Keep the finger straight and fully visible.",
  zone_localization_failed:
    "Ring zone localization failed. Keep more of the finger base visible.",
  width_measurement_failed:
    "Width measurement failed. Retake with phone parallel to the table and steady focus.",
  sobel_edge_refinement_failed:
    "Edge refinement failed. Turn on flash or use stronger, even lighting.",
  width_unreasonable:
    "Measured width is out of range. Retake with the phone parallel to the table.",
  disagreement_with_contour:
    "Edge methods disagree too much. Retake with cleaner edges and more even lighting.",
};

const formatFailReasonStatus = (failReason) => {
  if (!failReason) {
    return "Measurement failed.";
  }

  if (failReason.startsWith("quality_score_low_")) {
    return `Low edge quality detected. Turn on flash and retake. (${failReason})`;
  }

  if (failReason.startsWith("consistency_low_")) {
    return `Edge detection was inconsistent. Keep phone parallel to table and retry. (${failReason})`;
  }

  const friendlyMessage = failReasonMessageMap[failReason];
  if (friendlyMessage) {
    return `${friendlyMessage} (${failReason})`;
  }

  return `Measurement failed: ${failReason}`;
};

const setStatus = (text) => {
  statusText.textContent = text;
};

const showImage = (imgEl, frameEl, url) => {
  if (!url) return;
  imgEl.src = url;
  frameEl.classList.add("show");
  frameEl.querySelector(".placeholder").style.display = "none";
};

const buildMeasureSettings = () => {
  const fingerSelect = form.querySelector('select[name="finger_index"]');
  return {
    finger_index: fingerSelect ? fingerSelect.value : "index",
    edge_method: "sobel",
  };
};

const runMeasurement = async (endpoint, formData, inputUrlFallback = "") => {
  setStatus("Measuring… Please wait.");
  jsonOutput.textContent = "{\n  \"status\": \"processing\"\n}";

  try {
    const response = await fetch(endpoint, {
      method: "POST",
      body: formData,
    });

    if (!response.ok) {
      const error = await response.json();
      setStatus(error.error || "Measurement failed");
      return;
    }

    const data = await response.json();
    jsonOutput.textContent = JSON.stringify(data.result, null, 2);
    jsonLink.href = data.result_json_url || "#";

    showImage(inputPreview, inputFrame, data.input_image_url || inputUrlFallback);
    showImage(debugPreview, debugFrame, data.result_image_url);

    if (data.success) {
      setStatus("Measurement complete. Results updated.");
    } else {
      const failReason = data?.result?.fail_reason;
      setStatus(formatFailReasonStatus(failReason));
    }
  } catch (error) {
    setStatus("Network error. Please retry.");
  }
};

imageInput.addEventListener("change", () => {
  const file = imageInput.files[0];
  if (!file) {
    setStatus("Sample image loaded. Upload your own photo or click Start Measurement.");
    if (defaultSampleUrl) {
      showImage(inputPreview, inputFrame, defaultSampleUrl);
    }
    return;
  }
  const url = URL.createObjectURL(file);
  showImage(inputPreview, inputFrame, url);
  setStatus("Image ready. Click to start measurement.");
});

form.addEventListener("submit", async (event) => {
  event.preventDefault();

  const settings = buildMeasureSettings();
  const formData = new FormData();
  formData.append("finger_index", settings.finger_index);
  formData.append("edge_method", settings.edge_method);

  const file = imageInput.files[0];
  if (file) {
    formData.append("image", file);
    await runMeasurement("/api/measure", formData);
    return;
  }

  await runMeasurement("/api/measure-default", formData, defaultSampleUrl);
});

if (defaultSampleUrl) {
  showImage(inputPreview, inputFrame, defaultSampleUrl);
  setStatus("Sample image loaded. Upload your own photo or click Start Measurement.");
}