Hugging Face's logo

Spaces:
viswanani
/
ContractMigrationApp
Sleeping

App Files Community
pavansuresh commited on
Commit
d5d3a6b
·
verified ·
1 Parent(s): c1e25dc

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +80 -30
index.html CHANGED
@@ -1,10 +1,14 @@
1
  <!DOCTYPE html>
2
- <html>
3
  <head>
 
 
4
  <title>Contract Management App</title>
5
  <script src="https://cdn.jsdelivr.net/npm/react@18.2.0/umd/react.development.js"></script>
6
  <script src="https://cdn.jsdelivr.net/npm/react-dom@18.2.0/umd/react-dom.development.js"></script>
 
7
  <script src="https://cdn.tailwindcss.com"></script>
 
8
  </head>
9
  <body>
10
  <div id="root"></div>
@@ -12,46 +16,92 @@
12
  function App() {
13
  const [file, setFile] = React.useState(null);
14
  const [results, setResults] = React.useState(null);
 
 
15
 
16
  const handleFileChange = (event) => {
17
  setFile(event.target.files[0]);
 
18
  };
19
 
20
- const handleUpload = () => {
 
 
 
 
21
  const formData = new FormData();
22
  formData.append('contract', file);
23
- fetch('/upload_contract', {
24
- method: 'POST',
25
- body: formData
26
- })
27
- .then(response => response.json())
28
- .then(data => setResults(data));
 
 
 
 
 
 
 
 
 
 
 
 
29
  };
30
 
31
  return (
32
- <div className="container mx-auto p-4">
33
- <h1 className="text-2xl font-bold mb-4">Contract Management App</h1>
34
- <input type="file" onChange={handleFileChange} className="mb-4" />
35
- <button onClick={handleUpload} className="bg-blue-500 text-white px-4 py-2 rounded">
36
- Upload and Analyze
37
- </button>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
38
  {results && (
39
- <div className="mt-4">
40
- <h2 className="text-xl font-bold">Results</h2>
41
- <h3 className="text-lg">Extracted Entities:</h3>
42
- <ul className="list-disc pl-5">
43
- {results.entities.map((ent, index) => (
44
- <li key={index}>{ent.type}: {ent.entity}</li>
45
- ))}
46
- </ul>
47
- <h3 className="text-lg mt-2">Compliance Analysis:</h3>
48
- <ul className="list-disc pl-5">
49
- {results.compliance.map((res, index) => (
50
- <li key={index} className={res.risk === "high_risk" ? "text-red-500" : "text-green-500"}>
51
- {res.text}: {res.risk} ({(res.score * 100).toFixed(2)}%)
52
- </li>
53
- ))}
54
- </ul>
 
 
 
 
 
 
 
 
 
55
  </div>
56
  )}
57
  </div>
 
1
  <!DOCTYPE html>
2
+ <html lang="en">
3
  <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
  <title>Contract Management App</title>
7
  <script src="https://cdn.jsdelivr.net/npm/react@18.2.0/umd/react.development.js"></script>
8
  <script src="https://cdn.jsdelivr.net/npm/react-dom@18.2.0/umd/react-dom.development.js"></script>
9
+ <script src="https://cdn.jsdelivr.net/npm/axios@1.4.0/dist/axios.min.js"></script>
10
  <script src="https://cdn.tailwindcss.com"></script>
11
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone@6.26.0/babel.min.js"></script>
12
  </head>
13
  <body>
14
  <div id="root"></div>
 
16
  function App() {
17
  const [file, setFile] = React.useState(null);
18
  const [results, setResults] = React.useState(null);
19
+ const [error, setError] = React.useState(null);
20
+ const [contractId, setContractId] = React.useState(null);
21
 
22
  const handleFileChange = (event) => {
23
  setFile(event.target.files[0]);
24
+ setError(null);
25
  };
26
 
27
+ const handleUpload = async () => {
28
+ if (!file) {
29
+ setError("Please select a file to upload.");
30
+ return;
31
+ }
32
  const formData = new FormData();
33
  formData.append('contract', file);
34
+ try {
35
+ const response = await axios.post('http://localhost:5000/upload_contract', formData);
36
+ setResults(response.data);
37
+ setContractId(response.data.contract_id);
38
+ setError(null);
39
+ } catch (err) {
40
+ setError("Error uploading contract: " + err.message);
41
+ }
42
+ };
43
+
44
+ const fetchContract = async (id) => {
45
+ try {
46
+ const response = await axios.get(`http://localhost:5000/get_contract/${id}`);
47
+ setResults(response.data);
48
+ setError(null);
49
+ } catch (err) {
50
+ setError("Error fetching contract: " + err.message);
51
+ }
52
  };
53
 
54
  return (
55
+ <div className="container mx-auto p-6 max-w-4xl">
56
+ <h1 className="text-3xl font-bold text-gray-800 mb-6">Contract Management App</h1>
57
+ <div className="bg-white shadow-md rounded-lg p-6 mb-6">
58
+ <h2 className="text-xl font-semibold mb-4">Upload Contract</h2>
59
+ <input
60
+ type="file"
61
+ accept=".pdf,.txt"
62
+ onChange={handleFileChange}
63
+ className="mb-4 block w-full text-sm text-gray-500
64
+ file:mr-4 file:py-2 file:px-4
65
+ file:rounded-full file:border-0
66
+ file:text-sm file:font-semibold
67
+ file:bg-blue-50 file:text-blue-700
68
+ hover:file:bg-blue-100"
69
+ />
70
+ <button
71
+ onClick={handleUpload}
72
+ className="bg-blue-500 text-white px-6 py-2 rounded-full hover:bg-blue-600 transition"
73
+ >
74
+ Upload and Analyze
75
+ </button>
76
+ {error && <p className="text-red-500 mt-4">{error}</p>}
77
+ </div>
78
+
79
  {results && (
80
+ <div className="bg-white shadow-md rounded-lg p-6">
81
+ <h2 className="text-xl font-semibold mb-4">Analysis Results (Contract ID: {contractId})</h2>
82
+ <div className="mb-6">
83
+ <h3 className="text-lg font-medium text-gray-700">Extracted Entities</h3>
84
+ <ul className="list-disc pl-6 mt-2">
85
+ {results.entities.map((ent, index) => (
86
+ <li key={index} className="text-gray-600">
87
+ <span className="font-medium">{ent.type}</span>: {ent.entity}
88
+ </li>
89
+ ))}
90
+ </ul>
91
+ </div>
92
+ <div>
93
+ <h3 className="text-lg font-medium text-gray-700">Compliance Analysis</h3>
94
+ <ul className="list-disc pl-6 mt-2">
95
+ {results.compliance.map((res, index) => (
96
+ <li
97
+ key={index}
98
+ className={res.risk === "high_risk" ? "text-red-600" : "text-green-600"}
99
+ >
100
+ <span className="font-medium">{res.risk}</span> ({(res.score * 100).toFixed(2)}%): {res.text}
101
+ </li>
102
+ ))}
103
+ </ul>
104
+ </div>
105
  </div>
106
  )}
107
  </div>