├── Backend
    ├── api
    │   ├── __init__.py
    │   ├── web3
    │   │   ├── __init__.py
    │   │   ├── __pycache__
    │   │   │   ├── __init__.cpython-313.pyc
    │   │   │   ├── pdfencrypt.cpython-313.pyc
    │   │   │   ├── uploadToIPFS.cpython-313.pyc
    │   │   │   ├── blockchain_handler.cpython-313.pyc
    │   │   │   └── transactionVerification.cpython-313.pyc
    │   │   ├── transactionVerification.py
    │   │   ├── pdfencrypt.py
    │   │   ├── SimpleBackendRegistry.sol
    │   │   ├── uploadToIPFS.py
    │   │   ├── SimpleBackendRegistry.abi
    │   │   └── blockchain_handler.py
    │   ├── prettify
    │   │   ├── __init__.py
    │   │   ├── __pycache__
    │   │   │   ├── __init__.cpython-313.pyc
    │   │   │   └── prettify.cpython-313.pyc
    │   │   └── prettify.py
    │   ├── services
    │   │   ├── __init__.py
    │   │   ├── __pycache__
    │   │   │   ├── __init__.cpython-313.pyc
    │   │   │   ├── audio_handler.cpython-313.pyc
    │   │   │   ├── image_handler.cpython-313.pyc
    │   │   │   └── llm_handler.cpython-313.pyc
    │   │   ├── llm_handler.py
    │   │   ├── no_image_provided.py
    │   │   ├── video_handler.py
    │   │   └── image_handler.py
    │   ├── zipfolder
    │   │   ├── __init__.py
    │   │   ├── __pycache__
    │   │   │   ├── zip.cpython-313.pyc
    │   │   │   └── __init__.cpython-313.pyc
    │   │   └── zip.py
    │   ├── __pycache__
    │   │   ├── urls.cpython-313.pyc
    │   │   ├── views.cpython-313.pyc
    │   │   ├── __init__.cpython-313.pyc
    │   │   ├── llm_handler.cpython-313.pyc
    │   │   ├── serializers.cpython-313.pyc
    │   │   ├── audio_handler.cpython-313.pyc
    │   │   └── image_handler.cpython-313.pyc
    │   ├── urls.py
    │   ├── serializers.py
    │   ├── apps.py
    │   └── views.py
    ├── base
    │   ├── __init__.py
    │   ├── migrations
    │   │   ├── __init__.py
    │   │   ├── __pycache__
    │   │   │   ├── 0008_audio.cpython-313.pyc
    │   │   │   ├── 0009_video.cpython-313.pyc
    │   │   │   ├── 0010_pdf.cpython-313.pyc
    │   │   │   ├── __init__.cpython-313.pyc
    │   │   │   ├── 0001_initial.cpython-313.pyc
    │   │   │   ├── 0005_delete_text.cpython-313.pyc
    │   │   │   ├── 0002_img_text_delete_item.cpython-313.pyc
    │   │   │   ├── 0004_alter_img_image_url.cpython-313.pyc
    │   │   │   ├── 0006_text_alter_img_image_url.cpython-313.pyc
    │   │   │   ├── 0003_img_image_url_alter_img_title.cpython-313.pyc
    │   │   │   └── 0007_rename_user_text_text_content.cpython-313.pyc
    │   │   ├── 0005_delete_text.py
    │   │   ├── 0007_rename_user_text_text_content.py
    │   │   ├── 0004_alter_img_image_url.py
    │   │   ├── 0001_initial.py
    │   │   ├── 0010_pdf.py
    │   │   ├── 0009_video.py
    │   │   ├── 0008_audio.py
    │   │   ├── 0003_img_image_url_alter_img_title.py
    │   │   ├── 0006_text_alter_img_image_url.py
    │   │   └── 0002_img_text_delete_item.py
    │   ├── tests.py
    │   ├── admin.py
    │   ├── views.py
    │   ├── __pycache__
    │   │   ├── admin.cpython-313.pyc
    │   │   ├── apps.cpython-313.pyc
    │   │   ├── models.cpython-313.pyc
    │   │   └── __init__.cpython-313.pyc
    │   ├── apps.py
    │   └── models.py
    ├── catalyst
    │   ├── __init__.py
    │   ├── __pycache__
    │   │   ├── urls.cpython-313.pyc
    │   │   ├── wsgi.cpython-313.pyc
    │   │   ├── __init__.cpython-313.pyc
    │   │   └── settings.cpython-313.pyc
    │   ├── urls.py
    │   ├── asgi.py
    │   ├── wsgi.py
    │   └── settings.py
    ├── db.sqlite3
    ├── NLP model
    │   └── disease-diagnosis-nlp
    │   │   ├── __MACOSX
    │   │       └── disease-diagnosis-nlp
    │   │       │   ├── ._.DS_Store
    │   │       │   ├── src
    │   │       │       ├── ._.DS_Store
    │   │       │       └── model
    │   │       │       │   └── ._diagnosis_model.py
    │   │       │   ├── ._README.md
    │   │       │   └── ._requirements.txt
    │   │   └── disease-diagnosis-nlp
    │   │       ├── .DS_Store
    │   │       ├── requirements.txt
    │   │       ├── src
    │   │           ├── .DS_Store
    │   │           ├── app.py
    │   │           ├── utils
    │   │           │   └── preprocess.py
    │   │           ├── model
    │   │           │   └── diagnosis_model.py
    │   │           └── data
    │   │           │   └── symptoms.csv
    │   │       └── README.md
    ├── Readme.md
    └── manage.py
├── Frontend
    ├── Bk.png
    ├── Favi.png
    ├── Fr.png
    ├── img1.png
    ├── img2.png
    ├── img3.jpg
    ├── img4.png
    ├── Box.css
    ├── Navbar.js
    ├── Footer.js
    ├── index.css
    ├── Navbar.css
    ├── Footer.css
    ├── Main.css
    ├── Readme.md
    ├── Feature.css
    ├── in.html
    ├── index.html
    └── interactions.html
└── README.md


/Backend/api/__init__.py:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/Backend/api/web3/__init__.py:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/Backend/base/__init__.py:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/Backend/catalyst/__init__.py:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/Backend/api/prettify/__init__.py:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/Backend/api/services/__init__.py:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/Backend/api/zipfolder/__init__.py:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/Backend/base/migrations/__init__.py:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/Backend/base/tests.py:
--------------------------------------------------------------------------------
1 | from django.test import TestCase
2 | 
3 | # Create your tests here.
4 | 


--------------------------------------------------------------------------------
/Frontend/Bk.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/1-DARK/CATALYSTxTESSERX/HEAD/Frontend/Bk.png


--------------------------------------------------------------------------------
/Frontend/Favi.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/1-DARK/CATALYSTxTESSERX/HEAD/Frontend/Favi.png


--------------------------------------------------------------------------------
/Frontend/Fr.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/1-DARK/CATALYSTxTESSERX/HEAD/Frontend/Fr.png


--------------------------------------------------------------------------------
/Frontend/img1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/1-DARK/CATALYSTxTESSERX/HEAD/Frontend/img1.png


--------------------------------------------------------------------------------
/Frontend/img2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/1-DARK/CATALYSTxTESSERX/HEAD/Frontend/img2.png


--------------------------------------------------------------------------------
/Frontend/img3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/1-DARK/CATALYSTxTESSERX/HEAD/Frontend/img3.jpg


--------------------------------------------------------------------------------
/Frontend/img4.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/1-DARK/CATALYSTxTESSERX/HEAD/Frontend/img4.png


--------------------------------------------------------------------------------
/Backend/base/admin.py:
--------------------------------------------------------------------------------
1 | from django.contrib import admin
2 | 
3 | # Register your models here.
4 | 


--------------------------------------------------------------------------------
/Backend/base/views.py:
--------------------------------------------------------------------------------
1 | from django.shortcuts import render
2 | 
3 | # Create your views here.
4 | 


--------------------------------------------------------------------------------
/Backend/db.sqlite3:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/1-DARK/CATALYSTxTESSERX/HEAD/Backend/db.sqlite3


--------------------------------------------------------------------------------
/Backend/api/__pycache__/urls.cpython-313.pyc:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/1-DARK/CATALYSTxTESSERX/HEAD/Backend/api/__pycache__/urls.cpython-313.pyc


--------------------------------------------------------------------------------
/Backend/api/__pycache__/views.cpython-313.pyc:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/1-DARK/CATALYSTxTESSERX/HEAD/Backend/api/__pycache__/views.cpython-313.pyc


--------------------------------------------------------------------------------
/Backend/base/__pycache__/admin.cpython-313.pyc:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/1-DARK/CATALYSTxTESSERX/HEAD/Backend/base/__pycache__/admin.cpython-313.pyc


--------------------------------------------------------------------------------
/Backend/base/__pycache__/apps.cpython-313.pyc:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/1-DARK/CATALYSTxTESSERX/HEAD/Backend/base/__pycache__/apps.cpython-313.pyc


--------------------------------------------------------------------------------
/Backend/base/__pycache__/models.cpython-313.pyc:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/1-DARK/CATALYSTxTESSERX/HEAD/Backend/base/__pycache__/models.cpython-313.pyc


--------------------------------------------------------------------------------
/Backend/api/__pycache__/__init__.cpython-313.pyc:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/1-DARK/CATALYSTxTESSERX/HEAD/Backend/api/__pycache__/__init__.cpython-313.pyc


--------------------------------------------------------------------------------
/Backend/base/__pycache__/__init__.cpython-313.pyc:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/1-DARK/CATALYSTxTESSERX/HEAD/Backend/base/__pycache__/__init__.cpython-313.pyc


--------------------------------------------------------------------------------
/Backend/catalyst/__pycache__/urls.cpython-313.pyc:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/1-DARK/CATALYSTxTESSERX/HEAD/Backend/catalyst/__pycache__/urls.cpython-313.pyc


--------------------------------------------------------------------------------
/Backend/catalyst/__pycache__/wsgi.cpython-313.pyc:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/1-DARK/CATALYSTxTESSERX/HEAD/Backend/catalyst/__pycache__/wsgi.cpython-313.pyc


--------------------------------------------------------------------------------
/Backend/api/__pycache__/llm_handler.cpython-313.pyc:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/1-DARK/CATALYSTxTESSERX/HEAD/Backend/api/__pycache__/llm_handler.cpython-313.pyc


--------------------------------------------------------------------------------
/Backend/api/__pycache__/serializers.cpython-313.pyc:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/1-DARK/CATALYSTxTESSERX/HEAD/Backend/api/__pycache__/serializers.cpython-313.pyc


--------------------------------------------------------------------------------
/Backend/api/__pycache__/audio_handler.cpython-313.pyc:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/1-DARK/CATALYSTxTESSERX/HEAD/Backend/api/__pycache__/audio_handler.cpython-313.pyc


--------------------------------------------------------------------------------
/Backend/api/__pycache__/image_handler.cpython-313.pyc:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/1-DARK/CATALYSTxTESSERX/HEAD/Backend/api/__pycache__/image_handler.cpython-313.pyc


--------------------------------------------------------------------------------
/Backend/api/web3/__pycache__/__init__.cpython-313.pyc:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/1-DARK/CATALYSTxTESSERX/HEAD/Backend/api/web3/__pycache__/__init__.cpython-313.pyc


--------------------------------------------------------------------------------
/Backend/api/zipfolder/__pycache__/zip.cpython-313.pyc:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/1-DARK/CATALYSTxTESSERX/HEAD/Backend/api/zipfolder/__pycache__/zip.cpython-313.pyc


--------------------------------------------------------------------------------
/Backend/catalyst/__pycache__/__init__.cpython-313.pyc:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/1-DARK/CATALYSTxTESSERX/HEAD/Backend/catalyst/__pycache__/__init__.cpython-313.pyc


--------------------------------------------------------------------------------
/Backend/catalyst/__pycache__/settings.cpython-313.pyc:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/1-DARK/CATALYSTxTESSERX/HEAD/Backend/catalyst/__pycache__/settings.cpython-313.pyc


--------------------------------------------------------------------------------
/Backend/api/prettify/__pycache__/__init__.cpython-313.pyc:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/1-DARK/CATALYSTxTESSERX/HEAD/Backend/api/prettify/__pycache__/__init__.cpython-313.pyc


--------------------------------------------------------------------------------
/Backend/api/prettify/__pycache__/prettify.cpython-313.pyc:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/1-DARK/CATALYSTxTESSERX/HEAD/Backend/api/prettify/__pycache__/prettify.cpython-313.pyc


--------------------------------------------------------------------------------
/Backend/api/services/__pycache__/__init__.cpython-313.pyc:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/1-DARK/CATALYSTxTESSERX/HEAD/Backend/api/services/__pycache__/__init__.cpython-313.pyc


--------------------------------------------------------------------------------
/Backend/api/web3/__pycache__/pdfencrypt.cpython-313.pyc:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/1-DARK/CATALYSTxTESSERX/HEAD/Backend/api/web3/__pycache__/pdfencrypt.cpython-313.pyc


--------------------------------------------------------------------------------
/Backend/api/web3/__pycache__/uploadToIPFS.cpython-313.pyc:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/1-DARK/CATALYSTxTESSERX/HEAD/Backend/api/web3/__pycache__/uploadToIPFS.cpython-313.pyc


--------------------------------------------------------------------------------
/Backend/api/zipfolder/__pycache__/__init__.cpython-313.pyc:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/1-DARK/CATALYSTxTESSERX/HEAD/Backend/api/zipfolder/__pycache__/__init__.cpython-313.pyc


--------------------------------------------------------------------------------
/Backend/api/services/__pycache__/audio_handler.cpython-313.pyc:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/1-DARK/CATALYSTxTESSERX/HEAD/Backend/api/services/__pycache__/audio_handler.cpython-313.pyc


--------------------------------------------------------------------------------
/Backend/api/services/__pycache__/image_handler.cpython-313.pyc:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/1-DARK/CATALYSTxTESSERX/HEAD/Backend/api/services/__pycache__/image_handler.cpython-313.pyc


--------------------------------------------------------------------------------
/Backend/api/services/__pycache__/llm_handler.cpython-313.pyc:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/1-DARK/CATALYSTxTESSERX/HEAD/Backend/api/services/__pycache__/llm_handler.cpython-313.pyc


--------------------------------------------------------------------------------
/Backend/base/migrations/__pycache__/0008_audio.cpython-313.pyc:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/1-DARK/CATALYSTxTESSERX/HEAD/Backend/base/migrations/__pycache__/0008_audio.cpython-313.pyc


--------------------------------------------------------------------------------
/Backend/base/migrations/__pycache__/0009_video.cpython-313.pyc:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/1-DARK/CATALYSTxTESSERX/HEAD/Backend/base/migrations/__pycache__/0009_video.cpython-313.pyc


--------------------------------------------------------------------------------
/Backend/base/migrations/__pycache__/0010_pdf.cpython-313.pyc:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/1-DARK/CATALYSTxTESSERX/HEAD/Backend/base/migrations/__pycache__/0010_pdf.cpython-313.pyc


--------------------------------------------------------------------------------
/Backend/base/migrations/__pycache__/__init__.cpython-313.pyc:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/1-DARK/CATALYSTxTESSERX/HEAD/Backend/base/migrations/__pycache__/__init__.cpython-313.pyc


--------------------------------------------------------------------------------
/Backend/api/web3/__pycache__/blockchain_handler.cpython-313.pyc:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/1-DARK/CATALYSTxTESSERX/HEAD/Backend/api/web3/__pycache__/blockchain_handler.cpython-313.pyc


--------------------------------------------------------------------------------
/Backend/base/apps.py:
--------------------------------------------------------------------------------
1 | from django.apps import AppConfig
2 | 
3 | 
4 | class BaseConfig(AppConfig):
5 |     default_auto_field = 'django.db.models.BigAutoField'
6 |     name = 'base'
7 | 


--------------------------------------------------------------------------------
/Backend/base/migrations/__pycache__/0001_initial.cpython-313.pyc:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/1-DARK/CATALYSTxTESSERX/HEAD/Backend/base/migrations/__pycache__/0001_initial.cpython-313.pyc


--------------------------------------------------------------------------------
/Backend/api/web3/__pycache__/transactionVerification.cpython-313.pyc:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/1-DARK/CATALYSTxTESSERX/HEAD/Backend/api/web3/__pycache__/transactionVerification.cpython-313.pyc


--------------------------------------------------------------------------------
/Backend/base/migrations/__pycache__/0005_delete_text.cpython-313.pyc:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/1-DARK/CATALYSTxTESSERX/HEAD/Backend/base/migrations/__pycache__/0005_delete_text.cpython-313.pyc


--------------------------------------------------------------------------------
/Backend/NLP model/disease-diagnosis-nlp/__MACOSX/disease-diagnosis-nlp/._.DS_Store:
--------------------------------------------------------------------------------
1 | Mac OS X        	2Fx        @ATTRxx


--------------------------------------------------------------------------------
/Backend/NLP model/disease-diagnosis-nlp/disease-diagnosis-nlp/.DS_Store:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/1-DARK/CATALYSTxTESSERX/HEAD/Backend/NLP model/disease-diagnosis-nlp/disease-diagnosis-nlp/.DS_Store


--------------------------------------------------------------------------------
/Backend/NLP model/disease-diagnosis-nlp/__MACOSX/disease-diagnosis-nlp/src/._.DS_Store:
--------------------------------------------------------------------------------
1 | Mac OS X        	2Fx        @ATTRxx


--------------------------------------------------------------------------------
/Backend/NLP model/disease-diagnosis-nlp/disease-diagnosis-nlp/requirements.txt:
--------------------------------------------------------------------------------
1 | Flask==2.0.1
2 | pandas==1.3.3
3 | scikit-learn==0.24.2
4 | nltk==3.6.3
5 | numpy==1.21.2
6 | joblib==1.0.1
7 | tensorflow==2.6.0


--------------------------------------------------------------------------------
/Backend/NLP model/disease-diagnosis-nlp/disease-diagnosis-nlp/src/.DS_Store:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/1-DARK/CATALYSTxTESSERX/HEAD/Backend/NLP model/disease-diagnosis-nlp/disease-diagnosis-nlp/src/.DS_Store


--------------------------------------------------------------------------------
/Backend/base/migrations/__pycache__/0002_img_text_delete_item.cpython-313.pyc:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/1-DARK/CATALYSTxTESSERX/HEAD/Backend/base/migrations/__pycache__/0002_img_text_delete_item.cpython-313.pyc


--------------------------------------------------------------------------------
/Backend/base/migrations/__pycache__/0004_alter_img_image_url.cpython-313.pyc:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/1-DARK/CATALYSTxTESSERX/HEAD/Backend/base/migrations/__pycache__/0004_alter_img_image_url.cpython-313.pyc


--------------------------------------------------------------------------------
/Backend/api/urls.py:
--------------------------------------------------------------------------------
1 | from django.urls import path
2 | from . import views
3 | 
4 | urlpatterns = [
5 |     path('', views.query),
6 |     path('pdf', views.PdfViewSet),
7 |     path('verify-trxn', views.VerifyTxn)
8 | ]


--------------------------------------------------------------------------------
/Backend/NLP model/disease-diagnosis-nlp/__MACOSX/disease-diagnosis-nlp/._README.md:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/1-DARK/CATALYSTxTESSERX/HEAD/Backend/NLP model/disease-diagnosis-nlp/__MACOSX/disease-diagnosis-nlp/._README.md


--------------------------------------------------------------------------------
/Backend/base/migrations/__pycache__/0006_text_alter_img_image_url.cpython-313.pyc:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/1-DARK/CATALYSTxTESSERX/HEAD/Backend/base/migrations/__pycache__/0006_text_alter_img_image_url.cpython-313.pyc


--------------------------------------------------------------------------------
/Backend/base/migrations/__pycache__/0003_img_image_url_alter_img_title.cpython-313.pyc:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/1-DARK/CATALYSTxTESSERX/HEAD/Backend/base/migrations/__pycache__/0003_img_image_url_alter_img_title.cpython-313.pyc


--------------------------------------------------------------------------------
/Backend/base/migrations/__pycache__/0007_rename_user_text_text_content.cpython-313.pyc:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/1-DARK/CATALYSTxTESSERX/HEAD/Backend/base/migrations/__pycache__/0007_rename_user_text_text_content.cpython-313.pyc


--------------------------------------------------------------------------------
/Backend/NLP model/disease-diagnosis-nlp/__MACOSX/disease-diagnosis-nlp/._requirements.txt:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/1-DARK/CATALYSTxTESSERX/HEAD/Backend/NLP model/disease-diagnosis-nlp/__MACOSX/disease-diagnosis-nlp/._requirements.txt


--------------------------------------------------------------------------------
/Backend/NLP model/disease-diagnosis-nlp/__MACOSX/disease-diagnosis-nlp/src/model/._diagnosis_model.py:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/1-DARK/CATALYSTxTESSERX/HEAD/Backend/NLP model/disease-diagnosis-nlp/__MACOSX/disease-diagnosis-nlp/src/model/._diagnosis_model.py


--------------------------------------------------------------------------------
/Backend/api/web3/transactionVerification.py:
--------------------------------------------------------------------------------
1 | # Using web3.py
2 | from web3 import Web3
3 | 
4 | class Verify:
5 |     def trxn_verify(self, hash):
6 |         web3 = Web3(Web3.HTTPProvider("https://rpc.ankr.com/eth_holesky"))
7 |         receipt = web3.eth.get_transaction_receipt(str(hash))
8 |         return receipt
9 | 


--------------------------------------------------------------------------------
/Backend/catalyst/urls.py:
--------------------------------------------------------------------------------
 1 | from django.contrib import admin
 2 | from django.urls import path, include
 3 | from django.conf import settings             
 4 | from django.conf.urls.static import static
 5 | 
 6 | urlpatterns = [
 7 |     path('admin/', admin.site.urls),
 8 |     path('', include('api.urls')),
 9 | ] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
10 | 
11 | 


--------------------------------------------------------------------------------
/Backend/base/migrations/0005_delete_text.py:
--------------------------------------------------------------------------------
 1 | # Generated by Django 5.2 on 2025-04-21 11:56
 2 | 
 3 | from django.db import migrations
 4 | 
 5 | 
 6 | class Migration(migrations.Migration):
 7 | 
 8 |     dependencies = [
 9 |         ('base', '0004_alter_img_image_url'),
10 |     ]
11 | 
12 |     operations = [
13 |         migrations.DeleteModel(
14 |             name='Text',
15 |         ),
16 |     ]
17 | 


--------------------------------------------------------------------------------
/Backend/catalyst/asgi.py:
--------------------------------------------------------------------------------
 1 | """
 2 | ASGI config for medicheck project.
 3 | 
 4 | It exposes the ASGI callable as a module-level variable named ``application``.
 5 | 
 6 | For more information on this file, see
 7 | https://docs.djangoproject.com/en/5.1/howto/deployment/asgi/
 8 | """
 9 | 
10 | import os
11 | 
12 | from django.core.asgi import get_asgi_application
13 | 
14 | os.environ.setdefault('DJANGO_SETTINGS_MODULE', 'medicheck.settings')
15 | 
16 | application = get_asgi_application()
17 | 


--------------------------------------------------------------------------------
/Backend/catalyst/wsgi.py:
--------------------------------------------------------------------------------
 1 | """
 2 | WSGI config for medicheck project.
 3 | 
 4 | It exposes the WSGI callable as a module-level variable named ``application``.
 5 | 
 6 | For more information on this file, see
 7 | https://docs.djangoproject.com/en/5.1/howto/deployment/wsgi/
 8 | """
 9 | 
10 | import os
11 | 
12 | from django.core.wsgi import get_wsgi_application
13 | 
14 | os.environ.setdefault('DJANGO_SETTINGS_MODULE', 'medicheck.settings')
15 | 
16 | application = get_wsgi_application()
17 | 


--------------------------------------------------------------------------------
/Backend/base/migrations/0007_rename_user_text_text_content.py:
--------------------------------------------------------------------------------
 1 | # Generated by Django 5.2 on 2025-04-21 18:17
 2 | 
 3 | from django.db import migrations
 4 | 
 5 | 
 6 | class Migration(migrations.Migration):
 7 | 
 8 |     dependencies = [
 9 |         ('base', '0006_text_alter_img_image_url'),
10 |     ]
11 | 
12 |     operations = [
13 |         migrations.RenameField(
14 |             model_name='text',
15 |             old_name='user_text',
16 |             new_name='content',
17 |         ),
18 |     ]
19 | 


--------------------------------------------------------------------------------
/Backend/base/migrations/0004_alter_img_image_url.py:
--------------------------------------------------------------------------------
 1 | # Generated by Django 5.2 on 2025-04-21 11:54
 2 | 
 3 | from django.db import migrations, models
 4 | 
 5 | 
 6 | class Migration(migrations.Migration):
 7 | 
 8 |     dependencies = [
 9 |         ('base', '0003_img_image_url_alter_img_title'),
10 |     ]
11 | 
12 |     operations = [
13 |         migrations.AlterField(
14 |             model_name='img',
15 |             name='image_url',
16 |             field=models.ImageField(blank=True, null=True, upload_to='images/'),
17 |         ),
18 |     ]
19 | 


--------------------------------------------------------------------------------
/Backend/api/web3/pdfencrypt.py:
--------------------------------------------------------------------------------
 1 | from pypdf import PdfReader, PdfWriter
 2 | from pathlib import Path
 3 | 
 4 | current_dir = Path(__file__).resolve()
 5 | parent_dir = current_dir.parents[2]
 6 | 
 7 | class EncryptPdf:
 8 |     def encrypt(self, pdfname):
 9 |         reader = PdfReader(f"{parent_dir}/media/pdfs/{pdfname}")
10 |         writer = PdfWriter()
11 |         writer.append_pages_from_reader(reader)
12 |         writer.encrypt("pass")
13 | 
14 |         encrypt_pdf_loc = f"{parent_dir}/media/pdfs/{pdfname}"
15 |         with open(f"{parent_dir}/media/pdfs/{pdfname}", "wb") as f:
16 |             writer.write(f) 
17 |         
18 |         return encrypt_pdf_loc
19 | 


--------------------------------------------------------------------------------
/Backend/api/prettify/prettify.py:
--------------------------------------------------------------------------------
 1 | import json
 2 | 
 3 | class Prettify:
 4 |     def prettify_llm_json_string(self, json_string):
 5 | 
 6 |         if json_string.startswith('"') and json_string.endswith('"'):
 7 |             cleaned_string = json_string[1:-1]
 8 |         else:
 9 |             cleaned_string = json_string
10 | 
11 |         start_marker = '```html\n'
12 |         end_marker = '\n```'
13 | 
14 |         if cleaned_string.startswith(start_marker) and cleaned_string.endswith(end_marker):
15 |             json_content = cleaned_string[len(start_marker):-len(end_marker)]
16 |         else:
17 |             json_content = cleaned_string
18 | 
19 |         return json_content
20 | 


--------------------------------------------------------------------------------
/Backend/base/migrations/0001_initial.py:
--------------------------------------------------------------------------------
 1 | # Generated by Django 5.2 on 2025-04-20 19:51
 2 | 
 3 | from django.db import migrations, models
 4 | 
 5 | 
 6 | class Migration(migrations.Migration):
 7 | 
 8 |     initial = True
 9 | 
10 |     dependencies = [
11 |     ]
12 | 
13 |     operations = [
14 |         migrations.CreateModel(
15 |             name='Item',
16 |             fields=[
17 |                 ('id', models.BigAutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')),
18 |                 ('name', models.CharField(max_length=200)),
19 |                 ('created', models.DateTimeField(auto_now_add=True)),
20 |             ],
21 |         ),
22 |     ]
23 | 


--------------------------------------------------------------------------------
/Backend/base/migrations/0010_pdf.py:
--------------------------------------------------------------------------------
 1 | # Generated by Django 5.2 on 2025-04-27 10:50
 2 | 
 3 | from django.db import migrations, models
 4 | 
 5 | 
 6 | class Migration(migrations.Migration):
 7 | 
 8 |     dependencies = [
 9 |         ('base', '0009_video'),
10 |     ]
11 | 
12 |     operations = [
13 |         migrations.CreateModel(
14 |             name='Pdf',
15 |             fields=[
16 |                 ('id', models.BigAutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')),
17 |                 ('title', models.CharField(max_length=50, null=True)),
18 |                 ('file', models.FileField(upload_to='pdfs/')),
19 |             ],
20 |         ),
21 |     ]
22 | 


--------------------------------------------------------------------------------
/Backend/base/migrations/0009_video.py:
--------------------------------------------------------------------------------
 1 | # Generated by Django 5.2 on 2025-04-26 15:47
 2 | 
 3 | from django.db import migrations, models
 4 | 
 5 | 
 6 | class Migration(migrations.Migration):
 7 | 
 8 |     dependencies = [
 9 |         ('base', '0008_audio'),
10 |     ]
11 | 
12 |     operations = [
13 |         migrations.CreateModel(
14 |             name='Video',
15 |             fields=[
16 |                 ('id', models.BigAutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')),
17 |                 ('context', models.TextField(max_length=500, null=True)),
18 |                 ('video', models.FileField(upload_to='videos/')),
19 |             ],
20 |         ),
21 |     ]
22 | 


--------------------------------------------------------------------------------
/Backend/base/migrations/0008_audio.py:
--------------------------------------------------------------------------------
 1 | # Generated by Django 5.2 on 2025-04-23 12:17
 2 | 
 3 | from django.db import migrations, models
 4 | 
 5 | 
 6 | class Migration(migrations.Migration):
 7 | 
 8 |     dependencies = [
 9 |         ('base', '0007_rename_user_text_text_content'),
10 |     ]
11 | 
12 |     operations = [
13 |         migrations.CreateModel(
14 |             name='Audio',
15 |             fields=[
16 |                 ('id', models.BigAutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')),
17 |                 ('title', models.CharField(max_length=100, null=True)),
18 |                 ('audio', models.FileField(upload_to='audio_files/')),
19 |             ],
20 |         ),
21 |     ]
22 | 


--------------------------------------------------------------------------------
/Backend/base/migrations/0003_img_image_url_alter_img_title.py:
--------------------------------------------------------------------------------
 1 | # Generated by Django 5.2 on 2025-04-21 11:31
 2 | 
 3 | import base.models
 4 | from django.db import migrations, models
 5 | 
 6 | 
 7 | class Migration(migrations.Migration):
 8 | 
 9 |     dependencies = [
10 |         ('base', '0002_img_text_delete_item'),
11 |     ]
12 | 
13 |     operations = [
14 |         migrations.AddField(
15 |             model_name='img',
16 |             name='image_url',
17 |             field=models.ImageField(blank=True, null=True, upload_to='/images'),
18 |         ),
19 |         migrations.AlterField(
20 |             model_name='img',
21 |             name='title',
22 |             field=models.CharField(max_length=80, null=True),
23 |         ),
24 |     ]
25 | 


--------------------------------------------------------------------------------
/Backend/api/zipfolder/zip.py:
--------------------------------------------------------------------------------
 1 | import os
 2 | import pyminizip
 3 | 
 4 | def zip_folder_with_password(folder_path, zip_path, password, compression_level=5):
 5 |     files = []
 6 |     relative_paths = []
 7 | 
 8 |     for root, _, filenames in os.walk(folder_path):
 9 |         for filename in filenames:
10 |             full_path = os.path.join(root, filename)
11 |             relative_path = os.path.relpath(full_path, os.path.dirname(folder_path))
12 |             files.append(full_path)
13 |             relative_paths.append(relative_path)
14 | 
15 |     pyminizip.compress_multiple(
16 |         files,
17 |         relative_paths,
18 |         zip_path,
19 |         password,
20 |         compression_level
21 |     )
22 | 
23 |     return zip_path
24 | 
25 | 


--------------------------------------------------------------------------------
/Backend/api/web3/SimpleBackendRegistry.sol:
--------------------------------------------------------------------------------
 1 | 
 2 | pragma solidity ^0.8.20; 
 3 | 
 4 | contract SimpleBackendRegistry {
 5 | 
 6 |     mapping(address => mapping(bytes32 => string)) public backendReports;
 7 | 
 8 |     address public authorizedBackend;
 9 | 
10 |     event ReportHashStored(address indexed backend, bytes32 indexed userIdHash, string ipfsHash, uint timestamp);
11 | 
12 |     constructor() {
13 |         authorizedBackend = msg.sender; 
14 |     }
15 |     function storeReportHash(bytes32 _userIdHash, string memory _ipfsHash) public {
16 |         require(msg.sender == authorizedBackend, "Caller is not the authorized backend");
17 | 
18 |         backendReports[msg.sender][_userIdHash] = _ipfsHash;
19 | 
20 | 
21 |         emit ReportHashStored(msg.sender, _userIdHash, _ipfsHash, block.timestamp);
22 |     }
23 | }


--------------------------------------------------------------------------------
/Backend/base/migrations/0006_text_alter_img_image_url.py:
--------------------------------------------------------------------------------
 1 | # Generated by Django 5.2 on 2025-04-21 18:14
 2 | 
 3 | from django.db import migrations, models
 4 | 
 5 | 
 6 | class Migration(migrations.Migration):
 7 | 
 8 |     dependencies = [
 9 |         ('base', '0005_delete_text'),
10 |     ]
11 | 
12 |     operations = [
13 |         migrations.CreateModel(
14 |             name='Text',
15 |             fields=[
16 |                 ('id', models.BigAutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')),
17 |                 ('user_text', models.CharField(max_length=1000)),
18 |             ],
19 |         ),
20 |         migrations.AlterField(
21 |             model_name='img',
22 |             name='image_url',
23 |             field=models.ImageField(blank=True, null=True, upload_to='uploads/'),
24 |         ),
25 |     ]
26 | 


--------------------------------------------------------------------------------
/Backend/api/serializers.py:
--------------------------------------------------------------------------------
 1 | from rest_framework import serializers
 2 | from base.models import Img, Text, Audio, Video, Pdf
 3 | 
 4 | class TextSerializer(serializers.ModelSerializer):
 5 |     class Meta:
 6 |         model = Text
 7 |         fields = "__all__"
 8 | 
 9 | # TODO
10 | class ImgSerializer(serializers.ModelSerializer):
11 |     class Meta:
12 |         model = Img
13 |         fields = "__all__"
14 | 
15 | # TODO        
16 | class AudioSerializer(serializers.ModelSerializer):
17 |     class Meta:
18 |         model = Audio
19 |         fields = "__all__"
20 | 
21 | # TODO
22 | class VideoSerializer(serializers.ModelSerializer):
23 |     class Meta:
24 |         model = Video
25 |         fields = "__all__"
26 | 
27 | class PdfSerializer(serializers.ModelSerializer):
28 |     class Meta:
29 |         model = Pdf
30 |         fields = "__all__"
31 |         
32 | 


--------------------------------------------------------------------------------
/Backend/NLP model/disease-diagnosis-nlp/disease-diagnosis-nlp/src/app.py:
--------------------------------------------------------------------------------
 1 | from flask import Flask, request, jsonify
 2 | import pandas as pd
 3 | from model.diagnosis_model import DiagnosisModel
 4 | 
 5 | app = Flask(__name__)
 6 | 
 7 | # Load the symptoms data
 8 | symptoms_data_path = 'data/symptoms.csv'
 9 | symptoms_df = pd.read_csv(symptoms_data_path)
10 | 
11 | # Initialize the diagnosis model
12 | diagnosis_model = DiagnosisModel(symptoms_df)
13 | 
14 | @app.route('/diagnose', methods=['POST'])
15 | def diagnose():
16 |     user_input = request.json.get('symptoms', '')
17 |     if not user_input:
18 |         return jsonify({'error': 'No symptoms provided'}), 400
19 |     
20 |     # Get possible diseases based on user symptoms
21 |     possible_diseases = diagnosis_model.predict(user_input)
22 |     
23 |     return jsonify({'possible_diseases': possible_diseases})
24 | 
25 | if __name__ == '__main__':
26 |     app.run(debug=True)


--------------------------------------------------------------------------------
/Backend/base/migrations/0002_img_text_delete_item.py:
--------------------------------------------------------------------------------
 1 | # Generated by Django 5.2 on 2025-04-21 11:19
 2 | 
 3 | from django.db import migrations, models
 4 | 
 5 | 
 6 | class Migration(migrations.Migration):
 7 | 
 8 |     dependencies = [
 9 |         ('base', '0001_initial'),
10 |     ]
11 | 
12 |     operations = [
13 |         migrations.CreateModel(
14 |             name='Img',
15 |             fields=[
16 |                 ('id', models.BigAutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')),
17 |                 ('title', models.ImageField(blank=True, null=True, upload_to='images/')),
18 |             ],
19 |         ),
20 |         migrations.CreateModel(
21 |             name='Text',
22 |             fields=[
23 |                 ('id', models.BigAutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')),
24 |                 ('user_text', models.CharField(max_length=1000)),
25 |             ],
26 |         ),
27 |         migrations.DeleteModel(
28 |             name='Item',
29 |         ),
30 |     ]
31 | 


--------------------------------------------------------------------------------
/Backend/NLP model/disease-diagnosis-nlp/disease-diagnosis-nlp/src/utils/preprocess.py:
--------------------------------------------------------------------------------
 1 | import pandas as pd
 2 | import re
 3 | 
 4 | def load_symptoms_data(filepath):
 5 |     """Load symptoms data from a CSV file."""
 6 |     data = pd.read_csv(filepath)
 7 |     return data
 8 | 
 9 | def preprocess_symptoms(symptoms):
10 |     """Preprocess the input symptoms for model compatibility."""
11 |     # Convert to lowercase
12 |     symptoms = symptoms.lower()
13 |     # Remove any special characters
14 |     symptoms = re.sub(r'[^a-zA-Z0-9\s,]', '', symptoms)
15 |     # Split symptoms into a list
16 |     symptoms_list = [symptom.strip() for symptom in symptoms.split(',')]
17 |     return symptoms_list
18 | 
19 | def encode_symptoms(symptoms_list, symptoms_data):
20 |     """Encode the symptoms into a format suitable for the model."""
21 |     encoded = []
22 |     for symptom in symptoms_list:
23 |         if symptom in symptoms_data['Symptoms'].values:
24 |             encoded.append(1)  # Symptom present
25 |         else:
26 |             encoded.append(0)  # Symptom not present
27 |     return encoded


--------------------------------------------------------------------------------
/Backend/base/models.py:
--------------------------------------------------------------------------------
 1 | from django.db import models
 2 | 
 3 | class Text(models.Model):
 4 |     content = models.CharField(max_length=1000)
 5 | 
 6 |     def __str__(self):
 7 |         return self.user_text
 8 | 
 9 | class Img(models.Model):
10 |     title = models.CharField(max_length=80, blank=False, null=True)
11 |     image_url = models.ImageField(upload_to='uploads/', blank=True, null=True)
12 | 
13 |     def __str__(self):
14 |         return self.title
15 | 
16 | # TODO
17 | class Audio(models.Model):
18 |     title = models.CharField(max_length=100, blank=False, null=True)
19 |     audio = models.FileField(upload_to='audio_files/')
20 |     
21 |     def __str__(self):
22 |         return self.title
23 | 
24 | # TODO
25 | class Video(models.Model):
26 |     context = models.TextField(max_length=500, blank=False, null=True)
27 |     video = models.FileField(upload_to='videos/')
28 |     
29 |     def __str__(self):
30 |         return self.context
31 |     
32 | class Pdf(models.Model):
33 |     title = models.CharField(max_length=50, blank=False, null=True)
34 |     file = models.FileField(upload_to='pdfs/')
35 |     
36 |     def __str__(self):
37 |         return self.title
38 |     
39 | 


--------------------------------------------------------------------------------
/Frontend/Box.css:
--------------------------------------------------------------------------------
 1 | @media (max-width: 1024px) {
 2 |     .hero {
 3 |         flex-direction: column;
 4 |         text-align: center;
 5 |         height: auto;
 6 |         padding-top: 40px;
 7 |         padding-bottom: 40px;
 8 |     }
 9 |     .hero-content {
10 |         margin-bottom: 40px;
11 |     }
12 |     
13 |     .hero-buttons {
14 |         justify-content: center;
15 |     }
16 |     
17 |     .feature-card {
18 |         flex-direction: column;
19 |     }
20 |     
21 |     .feature-card.reverse {
22 |         flex-direction: column;
23 |     }
24 |     
25 |     .feature-content, .feature-image {
26 |         width: 100%;
27 |     }
28 |     
29 |    
30 |     
31 |   
32 | }
33 | 
34 | @media (max-width: 768px) {
35 | 
36 |     
37 |    
38 |     .fa-bars, .fa-times {
39 |         display: block;
40 |     }
41 |     
42 |     .fa-times {
43 |         margin: 20px;
44 |         font-size: 22px;
45 |         cursor: pointer;
46 |     }
47 |     
48 |     .section-header h2 {
49 |         font-size: 2rem;
50 |     }
51 |     
52 |     .hero-content h1 {
53 |         font-size: 2.5rem;
54 |     }
55 |     
56 |     .stats .container {
57 |         flex-direction: column;
58 |     }
59 |     
60 |     .stat-item {
61 |         margin-bottom: 20px;
62 |     }
63 |     
64 | 
65 | }
66 | 
67 | 


--------------------------------------------------------------------------------
/Backend/api/web3/uploadToIPFS.py:
--------------------------------------------------------------------------------
 1 | import requests
 2 | import os
 3 | import json # Import json for error details
 4 | 
 5 | class PinataUpload:
 6 |     def uploadPinata(self, filepath, jwt_token):
 7 |         url = "https://api.pinata.cloud/pinning/pinFileTOIPFS"
 8 | 
 9 |         headers = {'Authorization': f'Bearer {jwt_token}'}
10 | 
11 |         try:
12 |             with open(filepath, 'rb') as f:
13 |                 response = requests.post(url, files={'file': f}, headers=headers)
14 | 
15 |             response.raise_for_status() 
16 |             return response.json()
17 | 
18 |         except requests.exceptions.HTTPError as e:
19 |             print(f"HTTP error occurred during Pinata upload: {e}")
20 |             try:
21 |                  error_details = response.json()
22 |                  print(f"Pinata API Error Details: {error_details}")
23 |                  return {"error": error_details}
24 |             except json.JSONDecodeError:
25 |                  print("Could not decode Pinata error response body as JSON.")
26 |                  return {"error": response.text}
27 | 
28 |         except requests.exceptions.RequestException as e:
29 |             print(f"An error occurred during Pinata upload: {e}")
30 |             return {"error": str(e)}
31 | 
32 |         except FileNotFoundError:
33 |              print(f"Error: File not found at {filepath} for Pinata upload.")
34 |              return {"error": "File not found"}
35 | 
36 | # You might want to instantiate this once globally or pass it if using dependency injection
37 | # pinata_uploader_instance = PinataUpload()


--------------------------------------------------------------------------------
/Frontend/Navbar.js:
--------------------------------------------------------------------------------
 1 | document.addEventListener('DOMContentLoaded', function() {
 2 |     const toggler = document.querySelector('.navbar-toggler');
 3 |     const navbarLinks = document.querySelector('.navbar-links');
 4 |     const links = document.querySelectorAll('.navbar-links a');
 5 |     
 6 |     // Toggle menu on button click
 7 |     toggler.addEventListener('click', function() {
 8 |         const isExpanded = this.getAttribute('aria-expanded') === 'true';
 9 |         this.setAttribute('aria-expanded', !isExpanded);
10 |         navbarLinks.classList.toggle('active');
11 |     });
12 |     
13 |     // Close menu when a link is clicked (for mobile)
14 |     links.forEach(link => {
15 |         link.addEventListener('click', function() {
16 |             if (window.innerWidth <= 768) {
17 |                 toggler.setAttribute('aria-expanded', 'false');
18 |                 navbarLinks.classList.remove('active');
19 |             }
20 |         });
21 |     });
22 |     
23 |     // Close menu when clicking outside (optional)
24 |     document.addEventListener('click', function(e) {
25 |         if (window.innerWidth <= 768 && 
26 |             !navbarLinks.contains(e.target) && 
27 |             !toggler.contains(e.target)) {
28 |             toggler.setAttribute('aria-expanded', 'false');
29 |             navbarLinks.classList.remove('active');
30 |         }
31 |     });
32 |     
33 |     // Handle window resize
34 |     window.addEventListener('resize', function() {
35 |         if (window.innerWidth > 768) {
36 |             toggler.setAttribute('aria-expanded', 'false');
37 |             navbarLinks.classList.remove('active');
38 |         }
39 |     });
40 | });
41 | 


--------------------------------------------------------------------------------
/Backend/NLP model/disease-diagnosis-nlp/disease-diagnosis-nlp/README.md:
--------------------------------------------------------------------------------
 1 | # Disease Diagnosis NLP
 2 | 
 3 | This project is an NLP-based application designed to diagnose possible diseases based on user-provided symptoms. It utilizes a dataset of symptoms and their associated conditions to train a model that can predict diseases.
 4 | 
 5 | ## Project Structure
 6 | 
 7 | ```
 8 | disease-diagnosis-nlp
 9 | ├── src
10 | │   ├── app.py                # Main entry point for the application
11 | │   ├── model
12 | │   │   └── diagnosis_model.py # Implementation of the NLP model
13 | │   ├── data
14 | │   │   └── symptoms.csv       # Dataset containing conditions and symptoms
15 | │   └── utils
16 | │       └── preprocess.py      # Utility functions for data preprocessing
17 | ├── requirements.txt           # List of dependencies required for the project
18 | └── README.md                  # Documentation for the project
19 | ```
20 | 
21 | ## Setup Instructions
22 | 
23 | 1. **Clone the repository:**
24 |    ```
25 |    git clone <repository-url>
26 |    cd disease-diagnosis-nlp
27 |    ```
28 | 
29 | 2. **Install the required dependencies:**
30 |    ```
31 |    pip install -r requirements.txt
32 |    ```
33 | 
34 | ## Usage
35 | 
36 | 1. Run the application:
37 |    ```
38 |    python src/app.py
39 |    ```
40 | 
41 | 2. Input your symptoms when prompted. The application will analyze the symptoms and provide possible disease diagnoses.
42 | 
43 | ## Functionality
44 | 
45 | - The application loads symptoms data from `symptoms.csv`.
46 | - It preprocesses the input symptoms for better model performance.
47 | - The NLP model predicts possible diseases based on the symptoms provided by the user.
48 | 
49 | ## Contributing
50 | 
51 | Contributions are welcome! Please feel free to submit a pull request or open an issue for any suggestions or improvements.


--------------------------------------------------------------------------------
/Backend/NLP model/disease-diagnosis-nlp/disease-diagnosis-nlp/src/model/diagnosis_model.py:
--------------------------------------------------------------------------------
 1 | from sklearn.feature_extraction.text import CountVectorizer
 2 | from sklearn.naive_bayes import MultinomialNB
 3 | import pandas as pd
 4 | import numpy as np
 5 | import joblib
 6 | 
 7 | class DiagnosisModel:
 8 |     def __init__(self, data_path):
 9 |         self.data_path = data_path
10 |         self.model = None
11 |         self.vectorizer = None
12 |         self.conditions = None
13 | 
14 |     def load_data(self):
15 |         data = pd.read_csv(self.data_path)
16 |         self.conditions = data['Condition'].values
17 |         symptoms = data['Symptoms'].values
18 |         return symptoms, self.conditions
19 | 
20 |     def preprocess_data(self, symptoms):
21 |         # Convert symptoms to lowercase and remove any extra spaces
22 |         symptoms = [symptom.lower().strip() for symptom in symptoms]
23 |         return symptoms
24 | 
25 |     def train_model(self):
26 |         symptoms, conditions = self.load_data()
27 |         symptoms = self.preprocess_data(symptoms)
28 | 
29 |         self.vectorizer = CountVectorizer()
30 |         X = self.vectorizer.fit_transform(symptoms)
31 |         y = conditions
32 | 
33 |         self.model = MultinomialNB()
34 |         self.model.fit(X, y)
35 | 
36 |     def predict(self, user_symptoms):
37 |         user_symptoms = self.preprocess_data([user_symptoms])
38 |         X_user = self.vectorizer.transform(user_symptoms)
39 |         predictions = self.model.predict(X_user)
40 |         return predictions
41 | 
42 |     def save_model(self, model_path, vectorizer_path):
43 |         joblib.dump(self.model, model_path)
44 |         joblib.dump(self.vectorizer, vectorizer_path)
45 | 
46 |     def load_model(self, model_path, vectorizer_path):
47 |         self.model = joblib.load(model_path)
48 |         self.vectorizer = joblib.load(vectorizer_path)


--------------------------------------------------------------------------------
/Frontend/Footer.js:
--------------------------------------------------------------------------------
 1 | // JavaScript for interactive elements
 2 | document.addEventListener("DOMContentLoaded", function () {
 3 |   // Add animation class to social icons on page load
 4 |   const socialIcons = document.querySelectorAll(".social-icon");
 5 | 
 6 |   setTimeout(() => {
 7 |     socialIcons.forEach((icon, index) => {
 8 |       setTimeout(() => {
 9 |         icon.style.opacity = "0";
10 |         icon.style.transform = "translateY(20px)";
11 |         icon.style.transition = "all 0.3s ease";
12 | 
13 |         setTimeout(() => {
14 |           icon.style.opacity = "1";
15 |           icon.style.transform = "translateY(0)";
16 |         }, 50);
17 |       }, index * 100);
18 |     });
19 |   }, 500);
20 | 
21 |   // Current year for copyright
22 |   const year = new Date().getFullYear();
23 |   document.querySelector(
24 |     ".footer-bottom p"
25 |   ).innerHTML = `&copy; ${year} <a href="#">DiagnoAI</a>. All Rights Reserved.`;
26 | });
27 | document.addEventListener("DOMContentLoaded", function () {
28 |   // Add animation class to social icons on page load
29 |   const socialIcons = document.querySelectorAll(".social-icon");
30 | 
31 |   setTimeout(() => {
32 |     socialIcons.forEach((icon, index) => {
33 |       setTimeout(() => {
34 |         icon.style.opacity = "0";
35 |         icon.style.transform = "translateY(20px)";
36 |         icon.style.transition = "all 0.3s ease";
37 | 
38 |         setTimeout(() => {
39 |           icon.style.opacity = "1";
40 |           icon.style.transform = "translateY(0)";
41 |         }, 50);
42 |       }, index * 100);
43 |     });
44 |   }, 500);
45 | 
46 |   // Current year for copyright
47 |   const year = new Date().getFullYear();
48 |   document.querySelector(
49 |     ".footer-bottom p"
50 |   ).innerHTML = `&copy; ${year} <a href="#">DiagnoAI</a>. All Rights Reserved.`;
51 | });
52 | 


--------------------------------------------------------------------------------
/Backend/api/web3/SimpleBackendRegistry.abi:
--------------------------------------------------------------------------------
 1 | [
 2 | 	{
 3 | 		"anonymous": false,
 4 | 		"inputs": [
 5 | 			{
 6 | 				"indexed": true,
 7 | 				"internalType": "address",
 8 | 				"name": "backend",
 9 | 				"type": "address"
10 | 			},
11 | 			{
12 | 				"indexed": true,
13 | 				"internalType": "bytes32",
14 | 				"name": "userIdHash",
15 | 				"type": "bytes32"
16 | 			},
17 | 			{
18 | 				"indexed": false,
19 | 				"internalType": "string",
20 | 				"name": "ipfsHash",
21 | 				"type": "string"
22 | 			},
23 | 			{
24 | 				"indexed": false,
25 | 				"internalType": "uint256",
26 | 				"name": "timestamp",
27 | 				"type": "uint256"
28 | 			}
29 | 		],
30 | 		"name": "ReportHashStored",
31 | 		"type": "event"
32 | 	},
33 | 	{
34 | 		"inputs": [
35 | 			{
36 | 				"internalType": "bytes32",
37 | 				"name": "_userIdHash",
38 | 				"type": "bytes32"
39 | 			},
40 | 			{
41 | 				"internalType": "string",
42 | 				"name": "_ipfsHash",
43 | 				"type": "string"
44 | 			}
45 | 		],
46 | 		"name": "storeReportHash",
47 | 		"outputs": [],
48 | 		"stateMutability": "nonpayable",
49 | 		"type": "function"
50 | 	},
51 | 	{
52 | 		"inputs": [],
53 | 		"stateMutability": "nonpayable",
54 | 		"type": "constructor"
55 | 	},
56 | 	{
57 | 		"inputs": [],
58 | 		"name": "authorizedBackend",
59 | 		"outputs": [
60 | 			{
61 | 				"internalType": "address",
62 | 				"name": "",
63 | 				"type": "address"
64 | 			}
65 | 		],
66 | 		"stateMutability": "view",
67 | 		"type": "function"
68 | 	},
69 | 	{
70 | 		"inputs": [
71 | 			{
72 | 				"internalType": "address",
73 | 				"name": "",
74 | 				"type": "address"
75 | 			},
76 | 			{
77 | 				"internalType": "bytes32",
78 | 				"name": "",
79 | 				"type": "bytes32"
80 | 			}
81 | 		],
82 | 		"name": "backendReports",
83 | 		"outputs": [
84 | 			{
85 | 				"internalType": "string",
86 | 				"name": "",
87 | 				"type": "string"
88 | 			}
89 | 		],
90 | 		"stateMutability": "view",
91 | 		"type": "function"
92 | 	}
93 | ]


--------------------------------------------------------------------------------
/Backend/api/services/llm_handler.py:
--------------------------------------------------------------------------------
 1 | from google import genai
 2 | import json
 3 | 
 4 | class QueryResponse:
 5 |     def __init__(self):        
 6 |         self.client = genai.Client(api_key="")
 7 |     
 8 |     def generateResponse(self, diet):
 9 |         response = self.client.models.generate_content(
10 |             model="gemini-2.0-flash",
11 |             contents=f'''
12 |             Analyze the symptoms mentioned below, generate a html table suggesting potential conditions based *only* on them.
13 |             Symptons: [{diet}].
14 | 
15 |                 The table should have the following columns in this exact order: Disease, possibility.
16 | 
17 |                 Structure the response as a complete HTML `<table>` element, including `<thead>` for headers and `<tbody>` for the rows.
18 | 
19 |                 Output ONLY the HTML `<table>` element and its full content. Do not include any surrounding text, markdown code blocks (like ```html), or any other characters before or after the HTML table code.
20 | 
21 |                 Example structure of the HTML you should generate (use the actual meal plan data for the content):
22 | 
23 |                 ```html
24 |                 <table>
25 |                 <thead>
26 |                     <tr>
27 |                     <th>Disease</th>
28 |                     <th>Possibility</th>
29 |                     </tr>
30 |                 </thead>
31 |                 <tbody>
32 |                     <tr>
33 |                     <td>[Disease Name]</td>
34 |                     <td>[Possibility in percentage]</td>
35 |                     </tr>
36 |                     <tr>
37 |                     <td>[Disease Name]</td>
38 |                     <td>[Possibility in percentage]</td>
39 |                     </tr>
40 |                     <!-- ... and so on for other diseases -->
41 |                 </tbody>
42 |                 </table>
43 |                 '''
44 |                 '''Output Requirements:
45 |                 IMPORTANT: 
46 |                 NEVER use markdown formatting, code blocks (` ``` `), or escape sequences like `\n`.
47 |                 Provide the requested information directly without conversational filler..
48 |                 
49 |                 Begin the output now:''',
50 |         )
51 |         return response.text
52 | 
53 | 
54 | # if __name__ == '__name__':


--------------------------------------------------------------------------------
/Backend/api/services/no_image_provided.py:
--------------------------------------------------------------------------------
 1 | from google import genai
 2 | import json
 3 | 
 4 | 
 5 | class QueryResponse:
 6 |     def __init__(self):        
 7 |         self.client = genai.Client(api_key="")
 8 |     
 9 |     def generateResponse(self, diet):
10 |         response = self.client.models.generate_content(
11 |             model="gemini-2.0-flash",
12 |             contents=f'''
13 |            Analyze the symptoms mentioned below, generate a html table suggesting potential conditions based *only* on them.
14 |             Symptons: [{diet}].
15 | 
16 |                 The table should have the following columns in this exact order: Disease, possibility.
17 | 
18 |                 Structure the response as a complete HTML `<table>` element, including `<thead>` for headers and `<tbody>` for the rows.
19 | 
20 |                 Output ONLY the HTML `<table>` element and its full content. Do not include any surrounding text, markdown code blocks (like ```html), or any other characters before or after the HTML table code.
21 | 
22 |                 Example structure of the HTML you should generate (use the actual meal plan data for the content):
23 | 
24 |                 ```html
25 |                 <table>
26 |                 <thead>
27 |                     <tr>
28 |                     <th>Disease</th>
29 |                     <th>Possibility</th>
30 |                     </tr>
31 |                 </thead>
32 |                 <tbody>
33 |                     <tr>
34 |                     <td>[Disease Name]</td>
35 |                     <td>[Possibility in percentage]</td>
36 |                     </tr>
37 |                     <tr>
38 |                     <td>[Disease Name]</td>
39 |                     <td>[Possibility in percentage]</td>
40 |                     </tr>
41 |                     <!-- ... and so on for other diseases -->
42 |                 </tbody>
43 |                 </table>
44 |                 '''
45 |                 '''Output Requirements:
46 |                 IMPORTANT: 
47 |                 NEVER use markdown formatting, code blocks (` ``` `), or escape sequences like `\n`.
48 |                 Provide the requested information directly without conversational filler..
49 |                 
50 |                 Begin the output now:''',
51 |         )
52 |         return response.text
53 | 
54 | 
55 | # if __name__ == '__name__':


--------------------------------------------------------------------------------
/Backend/Readme.md:
--------------------------------------------------------------------------------
 1 | # DiagnoAI - Medical Diagnosis Platform
 2 | 
 3 | ## Overview
 4 | 
 5 | This is the backend service for the DiagnoAI Medical Diagnosis Platform. It provides REST API endpoints for handling various media types, blockchain integration for medical records, and IPFS storage capabilities.
 6 | 
 7 | ## Technology Stack
 8 | 
 9 | - **Framework**: Django with Django REST Framework
10 | - **Database**: SQLite (db.sqlite3)
11 | - **Storage**: IPFS integration for decentralized file storage
12 | - **Blockchain**: Web3 integration with Ethereum (SimpleBackendRegistry contract)
13 | 
14 | ## Core Components
15 | 
16 | ### API Module
17 | 
18 | - **Serializers**: Handles data serialization for various media types (Text, Image, Audio, Video, PDF)
19 | - **Views**: API endpoints for frontend communication
20 | - **Services**: Business logic implementation
21 | - **Web3**: Blockchain integration services
22 | 
23 | ### Models
24 | 
25 | The backend supports multiple media types:
26 | 
27 | - Text documents
28 | - Images
29 | - Video files
30 | - PDF reports
31 | 
32 | ## Key Endpoints
33 | 
34 | - **/pdf**: Accepts PDF reports from the frontend for IPFS/Blockchain storage
35 | - Transaction verification endpoints for blockchain data retrieval
36 | 
37 | ## Features
38 | 
39 | - **Media Processing**: Handles various media formats for medical diagnostics
40 | - **Blockchain Integration**: Secures medical reports using smart contracts
41 | - **IPFS Storage**: Decentralized storage for medical documents
42 | - **Transaction Verification**: Validate blockchain transactions for authenticity
43 | - **Error Handling**: Robust error management for network and processing issues
44 | 
45 | ## Development Setup
46 | 
47 | 1. Install dependencies:
48 | 
49 | ```bash
50 | pip install -r requirements.txt
51 | ```
52 | 
53 | 2. Run migrations:
54 | 
55 | ```bash
56 | python manage.py migrate
57 | ```
58 | 
59 | 3. Start development server:
60 | 
61 | ```bash
62 | python manage.py runserver
63 | ```
64 | 
65 | ## API Integration
66 | 
67 | The backend provides integration points for the following frontend features:
68 | 
69 | - PDF report generation and storage
70 | - Blockchain transaction verification
71 | - Media file processing for diagnostic tools
72 | 
73 | ## Security Considerations
74 | 
75 | - Implements encryption for sensitive medical data
76 | - Uses blockchain technology for immutable record-keeping
77 | - Generates verification IDs for patient records
78 | 
79 | ## License
80 | 
81 | This project is proprietary. All rights reserved.
82 | 


--------------------------------------------------------------------------------
/Frontend/index.css:
--------------------------------------------------------------------------------
  1 | 
  2 | .chat-container {
  3 |     position: fixed;
  4 |     bottom: 20px;
  5 |     right: 20px;
  6 |     width: 350px;
  7 |     background-color: #212121;
  8 |     border-radius: 15px;
  9 |     box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
 10 |     display: none;
 11 | }
 12 | 
 13 | .chat-header {
 14 |     background-color: #212121;
 15 |     color: #4fc3f7;
 16 |     padding: 15px;
 17 |     border-radius: 15px 15px 0 0;
 18 |     display: flex;
 19 |     justify-content: space-between;
 20 |     align-items: center;
 21 | }
 22 | 
 23 | .chat-body {
 24 |     height: 370px;
 25 |     padding: 15px;
 26 |     overflow-y: auto;
 27 | }
 28 | 
 29 | .chat-messages {
 30 |     display: flex;
 31 |     flex-direction: column;
 32 |     gap: 10px;
 33 | }
 34 | 
 35 | .message {
 36 |     max-width: 80%;
 37 |     padding: 10px 15px;
 38 |     border-radius: 20px;
 39 |     margin: 5px 0;
 40 | }
 41 | 
 42 | .bot-message {
 43 |     background-color: #4fc3f7;
 44 |     color: white;
 45 |     align-self: flex-start;
 46 | }
 47 | 
 48 | .user-message {
 49 |     background-color: #2d2d2d;
 50 |     color: white;
 51 |     align-self: flex-end;
 52 | }
 53 | 
 54 | .chat-input {
 55 |     display: flex;
 56 |     padding: 15px;
 57 |     background-color:  #2d2d2d;
 58 |     border-radius: 0 0 15px 15px;
 59 | }
 60 | 
 61 | input[type="text"] {
 62 |     flex: 1;
 63 |     padding: 10px;
 64 |     border: none;
 65 |     border-radius: 25px;
 66 |     background-color:  #2d2d2d;
 67 |     color: white;
 68 |     margin-right: 10px;
 69 | }
 70 | 
 71 | button {
 72 |     background-color: #4fc3f7;
 73 |     color: white;
 74 |     border: none;
 75 |     padding: 10px 20px;
 76 |     border-radius: 50%;
 77 |     cursor: pointer;
 78 |     transition: background-color 0.3s;
 79 | }
 80 | 
 81 | button:hover {
 82 |     background-color: #4fc3f7;
 83 | }
 84 | 
 85 | .chat-toggle {
 86 |     position: fixed;
 87 |     bottom: 20px;
 88 |     right: 20px;
 89 |     background-color: #4fc3f7;
 90 |     color: white;
 91 |     padding: 15px;
 92 |     border-radius: 26px;
 93 |     cursor: pointer;
 94 |     box-shadow: 0 0 15px rgba(0, 123, 255, 0.5);
 95 | }
 96 | 
 97 | /* Scrollbar Styling */
 98 | ::-webkit-scrollbar {
 99 |     width: 8px;
100 | }
101 | 
102 | ::-webkit-scrollbar-track {
103 |     background: #1a1a1a;
104 | }
105 | 
106 | ::-webkit-scrollbar-thumb {
107 | 
108 |     border-radius: 4px;
109 | }
110 | 
111 | 


--------------------------------------------------------------------------------
/Backend/manage.py:
--------------------------------------------------------------------------------
 1 | #!/usr/bin/env python
 2 | """Django's command-line utility for administrative tasks."""
 3 | import os
 4 | import sys
 5 | 
 6 | # --- Import your Web3 initialization function ---
 7 | # Adjust the import path based on where your blockchain_handler.py is relative to manage.py
 8 | # Assuming manage.py is in the project root, and blockchain_handler is in api/web3/services/
 9 | try:
10 |     # Import the initialization function and the w3 object for status check
11 |     from api.web3.blockchain_handler import initialize_web3, w3
12 | except ImportError:
13 |     print("Error: Could not import initialize_web3 from api.web3.services.blockchain_handler. Check your import path.")
14 |     # Decide what to do if import fails: maybe exit, or just print error and continue without Web3
15 | 
16 | # --- Your Web3 Initialization Logic Here ---
17 | # This code will run BEFORE Django commands are executed.
18 | # Add checks to ensure it only runs when you want it to (e.g., during runserver)
19 | # Use the same sys.argv check as in the apps.py example
20 | 
21 | is_running_server = 'runserver' in sys.argv or 'gunicorn' in sys.argv or 'uvicorn' in sys.argv
22 | is_running_qcluster = 'qcluster' in sys.argv # If using Django Q for background tasks
23 | 
24 | # Check if the initialization function was imported successfully
25 | if 'initialize_web3' in globals(): # Check if the name 'initialize_web3' exists in global scope
26 |     if is_running_server or is_running_qcluster:
27 |          print("[manage.py] Initializing Web3...")
28 |          # Call the initialization function
29 |          if not initialize_web3():
30 |              print("[manage.py] FATAL ERROR: Web3 initialization failed during startup. Blockchain features will be unavailable.")
31 |          else:
32 |              print("[manage.py] Web3 initialization finished successfully.")
33 |     else:
34 |          # For other management commands (like migrate, shell, test), skip initialization
35 |          print("[manage.py] Running management command, skipping Web3 initialization.")
36 | else:
37 |     # Handle the case where the import failed
38 |     print("[manage.py] Web3 initialization skipped because import failed.")
39 | 
40 | 
41 | # --- Rest of your manage.py code (remains the same) ---
42 | def main():
43 |     """Run administrative tasks."""
44 |     os.environ.setdefault('DJANGO_SETTINGS_MODULE', 'medicheck.settings')
45 |     try:
46 |         from django.core.management import execute_from_command_line
47 |     except ImportError as exc:
48 |         raise ImportError(
49 |             "Couldn't import Django. Are you sure it's installed and "
50 |             "available on your PYTHONPATH environment variable? Did you "
51 |             "forget to activate a virtual environment?"
52 |         ) from exc
53 |     execute_from_command_line(sys.argv)
54 | 
55 | 
56 | if __name__ == '__main__':
57 |     main()


--------------------------------------------------------------------------------
/Backend/api/services/video_handler.py:
--------------------------------------------------------------------------------
 1 | from google import genai
 2 | from google.genai import types
 3 | import time
 4 | from pathlib import Path
 5 | 
 6 | class VideoHandler():
 7 |     client = genai.Client(api_key="")
 8 |     current_dir = Path(__file__).resolve()
 9 |     parent_dir = current_dir.parents[2]
10 | 
11 |     def Response(self, videoName):
12 |         #         video_file_name = f"/home/linuxer77/Programs/Hackathon-Project/Disease-bullshit/media/videos/{videoName}"
13 |         # video_bytes = open(video_file_name, 'rb').read()
14 | 
15 |         myfile = self.client.files.upload(file=f"{self.parent_dir}/media/videos/{videoName}")
16 | 
17 |         time.sleep(15)
18 |         response = self.client.models.generate_content(
19 |             model="gemini-2.0-flash", contents=[myfile, '''
20 |                 Analyze the provided video. Based SOLELY on the visual patterns you detect, create a html table stating potential corresponding diseases or significant abnormalities. sIf no disease is found just respond with "No abnormalities detected."
21 | 
22 | 
23 |                 The table should have the following columns in this exact order: Disease, possibility.
24 | 
25 |                 Structure the response as a complete HTML `<table>` element, including `<thead>` for headers and `<tbody>` for the rows.
26 | 
27 |                 Output ONLY the HTML `<table>` element and its full content. Do not include any surrounding text, markdown code blocks (like ```html), or any other characters before or after the HTML table code.
28 | 
29 |                 Example structure of the HTML you should generate (use the actual meal plan data for the content):
30 | 
31 |                 ```html
32 |                 <table>
33 |                 <thead>
34 |                     <tr>
35 |                     <th>Disease</th>
36 |                     <th>Possibility</th>
37 |                     </tr>
38 |                 </thead>
39 |                 <tbody>
40 |                     <tr>
41 |                     <td>[Disease Name]</td>
42 |                     <td>[Possibility in percentage]</td>
43 |                     </tr>
44 |                     <tr>
45 |                     <td>[Disease Name]</td>
46 |                     <td>[Possibility in percentage]</td>
47 |                     </tr>
48 |                     <!-- ... and so on for other diseases -->
49 |                 </tbody>
50 |                 </table>
51 |                 '''
52 |                 '''Output Requirements:
53 |                 IMPORTANT: 
54 |                 NEVER use markdown formatting, code blocks (` ``` `), or escape sequences like `\n`.
55 |                 Provide the requested information directly without conversational filler..
56 |                 If no disease is found just respond with "No abnormalities detected."
57 |                 Begin the output now:
58 |                                                 ''']
59 |         )
60 | 
61 |         return response.text


--------------------------------------------------------------------------------
/Frontend/Navbar.css:
--------------------------------------------------------------------------------
  1 | @import url('https://fonts.cdnfonts.com/css/brigends-expanded');
  2 | @import url(https://db.onlinewebfonts.com/c/57b4f5e63d8291afbed1091f97645d52?family=Phonk+Regular+DEMO);
  3 | * {
  4 |     margin: 0;
  5 |     padding: 0;
  6 |     box-sizing: border-box;
  7 | }
  8 | 
  9 | body {
 10 |  
 11 |     line-height: 1.6;
 12 | }
 13 | 
 14 | /* Navbar styles */
 15 | .navbar {
 16 |  
 17 |     color: white;
 18 |     position: sticky;
 19 |     top: 0;
 20 |     z-index: 1000;
 21 |     font-family: 'Druk', sans-serif;
 22 | 
 23 | }
 24 | 
 25 | 
 26 | .navbar-container {
 27 |     display: flex;
 28 |     justify-content:space-between;
 29 |     align-items: center;
 30 |     padding: 0rem 0rem;
 31 | }
 32 | 
 33 | .navbar-brand {
 34 |  
 35 |   
 36 |     color: white;
 37 |    
 38 |     font-size: 1.5rem;
 39 |     text-decoration: none;
 40 | }
 41 | 
 42 | .navbar-links ul {
 43 |     display: flex;
 44 |     list-style: none;
 45 |     gap: 2rem;
 46 |       justify-content: flex-end !important;
 47 | }
 48 | li{
 49 |     padding: 10px;
 50 | }
 51 | 
 52 | .navbar-links a {
 53 |     color: rgba(255, 255, 255, 0.55);
 54 |     text-decoration: none;
 55 |     font-weight: 500;
 56 |     transition: color 0.3s;
 57 |     font-size: 1.1rem;
 58 | }
 59 | 
 60 | .navbar-links a:hover {
 61 |     color: #c0c4cb;
 62 | }
 63 | 
 64 | .navbar-toggler {
 65 |     display: none;
 66 |     background: none;
 67 |     border: none;
 68 |   
 69 |     font-size: 1.5rem;
 70 |     cursor: pointer;
 71 |     padding: 0.5rem;
 72 | }
 73 | 
 74 | .sr-only {
 75 |     position: absolute;
 76 |     width: 1px;
 77 |     height: 1px;
 78 |     padding: 0;
 79 |     margin: -1px;
 80 |     overflow: hidden;
 81 |     clip: rect(0, 0, 0, 0);
 82 |     white-space: nowrap;
 83 |     border-width: 0;
 84 | }
 85 | 
 86 | /* Main content styles */
 87 | main {
 88 |     max-width: 1200px;
 89 |     margin: 2rem auto;
 90 |     padding: 0 2rem;
 91 | }
 92 | 
 93 | /* Responsive styles */
 94 | @media (max-width: 768px) {
 95 |     .navbar-container {
 96 |         padding: 1rem;
 97 |        
 98 |     }
 99 | 
100 |     .navbar-toggler {
101 |         display: block;
102 |     }
103 | 
104 |     .navbar-links {
105 |         position: absolute;
106 |         top: 100%;
107 |         left: 0;
108 |         width: 100%;
109 |         background-color: white;
110 |    
111 |         padding: 1rem 0;
112 |         clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
113 |         transition: clip-path 0.4s ease-out;
114 |     }
115 | 
116 |     .navbar-links.active {
117 |         clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
118 |     }
119 | 
120 |     .navbar-links ul {
121 |         flex-direction: column;
122 |         align-items: center;
123 |         gap: 1rem;
124 |         padding: 1rem 0;
125 |     }
126 | }
127 | 


--------------------------------------------------------------------------------
/Backend/api/services/image_handler.py:
--------------------------------------------------------------------------------
 1 | from google.genai import types
 2 | from google import genai
 3 | import os
 4 | from pathlib import Path
 5 | 
 6 | class PossibleDisease:
 7 |     current_dir = Path(__file__).resolve()
 8 |     parent_dir = current_dir.parents[2]
 9 | 
10 |     client = genai.Client(api_key="")
11 |     def getDisease(self, imgName):
12 |         with open(f'{self.parent_dir}/media/uploads/{imgName}', 'rb') as f:
13 |             self.img_bytes = f.read()
14 | 
15 |         response = self.client.models.generate_content(
16 |             model='gemini-2.5-flash-preview-04-17',
17 |             contents=[
18 |                 types.Part.from_bytes(
19 |                 data=self.img_bytes,
20 |                 mime_type='image/jpeg',
21 |                 ),
22 |                 '''Analyze the provided chest X-ray image. Based SOLELY on the visual patterns you detect, create a html table stating potential corresponding diseases or significant abnormalities.
23 | 
24 |                 The table should have the following columns in this exact order: Disease, possibility.
25 | 
26 |                 Structure the response as a complete HTML `<table>` element, including `<thead>` for headers and `<tbody>` for the rows.
27 | 
28 |                 Output ONLY the HTML `<table>` element and its full content. Do not include any surrounding text, markdown code blocks (like ```html), or any other characters before or after the HTML table code.
29 | 
30 |                 Example structure of the HTML you should generate (use the actual meal plan data for the content):
31 | 
32 |                 ```html
33 |                 <table>
34 |                 <thead>
35 |                     <tr>
36 |                     <th>Disease</th>
37 |                     <th>Possibility</th>
38 |                     </tr>
39 |                 </thead>
40 |                 <tbody>
41 |                     <tr>
42 |                     <td>[Disease Name]</td>
43 |                     <td>[Possibility in percentage]</td>
44 |                     </tr>
45 |                     <tr>
46 |                     <td>[Disease Name]</td>
47 |                     <td>[Possibility in percentage]</td>
48 |                     </tr>
49 |                     <!-- ... and so on for other diseases -->
50 |                 </tbody>
51 |                 </table>
52 |                 '''
53 |                 '''Output Requirements:
54 |                 IMPORTANT: 
55 |                 IF NO IMAGE IS PROVIDED THEN ANALYIZE THE USER BASED ON THE TEXT PROVIDED AND GIVE OUT THE TABLE OF POSSIBLE DISEASE ON THE SYMPTOMPS PROVIDED
56 |                 NEVER use markdown formatting, code blocks (` ``` `), or escape sequences like `\n`.
57 |                 Provide the requested information directly without conversational filler..
58 |                 If no disease is found just respond with "No abnormalities detected."
59 |                 Begin the output now:'''
60 |                 ]
61 |         )
62 | 
63 |         return response.text
64 | 
65 | 


--------------------------------------------------------------------------------
/Backend/NLP model/disease-diagnosis-nlp/disease-diagnosis-nlp/src/data/symptoms.csv:
--------------------------------------------------------------------------------
 1 | Condition,Symptoms
 2 | Heart Disease,"Chest pain or discomfort (angina), Shortness of breath, Fatigue, Irregular heartbeat"
 3 | Diabetes,"Frequent urination, Excessive thirst, Unexplained weight loss, Fatigue"
 4 | Obesity,"Excessive body fat, Difficulty in physical activity, Shortness of breath, Joint pain"
 5 | Hypertension (High Blood Pressure),"Headaches, Dizziness, Blurred vision, Chest pain"
 6 | Cancer,"Unexplained weight loss, Fatigue, Persistent pain, Lumps or swelling"
 7 | Osteoporosis,"Bone fractures (especially in the hip, spine, or wrist), Loss of height over time, Back pain, Stooped posture"
 8 | Gastroesophageal Reflux Disease (GERD),"Heartburn, Regurgitation of food or sour liquid, Difficulty swallowing, Chest pain"
 9 | Irritable Bowel Syndrome (IBS),"Abdominal pain or cramping, Bloating, Diarrhea or constipation (or both), Gas"
10 | Celiac Disease,"Diarrhea, Bloating and gas, Abdominal pain, Fatigue"
11 | Allergies,"Sneezing, Itchy eyes, nose, or throat, Skin rashes, Swelling"
12 | Kidney Disease,"Swelling in legs, ankles, or feet, Fatigue, Shortness of breath, Changes in urination"
13 | Liver Disease,"Jaundice (yellowing of skin and eyes), Abdominal pain and swelling, Fatigue, Dark urine"
14 | Stroke,"Sudden numbness or weakness in the face, arm, or leg, Confusion or trouble speaking, Vision problems, Severe headache"
15 | Alzheimer Disease,"Memory loss, Difficulty in problem-solving, Confusion, Mood swings"
16 | Asthma,"Wheezing, Shortness of breath, Chest tightness, Coughing"
17 | Gout,"Sudden, severe joint pain (often in the big toe), Swelling and redness in the affected joint, Limited range of motion"
18 | Acne,"Pimples, blackheads, or whiteheads, Oily skin, Redness or inflammation, Scarring"
19 | Psoriasis,"Red, scaly patches on the skin, Itching or burning, Dry, cracked skin, Thickened nails"
20 | Depression,"Persistent sadness or hopelessness, Loss of interest in activities, Fatigue, Changes in appetite or sleep"
21 | Anxiety,"Excessive worry or fear, Restlessness, Rapid heartbeat, Sweating"
22 | Chronic Fatigue Syndrome,"Extreme fatigue that doesn’t improve with rest, Sleep problems, Memory or concentration issues, Muscle or joint pain"
23 | Fibromyalgia,"Widespread pain, Fatigue, Sleep disturbances, Cognitive difficulties (""fibro fog"")"
24 | Multiple Sclerosis,"Numbness or weakness in limbs, Vision problems, Fatigue, Difficulty with coordination"
25 | Parkinsons,"Tremors (shaking), Stiffness or slow movement, Balance problems, Speech changes"
26 | Rheumatoid Arthritis,"Joint pain and swelling, Stiffness (especially in the morning), Fatigue, Fever"
27 | Diverticulitis,"Abdominal pain (usually on the left side), Fever, Nausea or vomiting, Changes in bowel habits"
28 | Chronic Obstructive Pulmonary Disease (COPD),"Shortness of breath, Chronic cough, Wheezing, Frequent respiratory infections"
29 | Sleep Disorders,"Difficulty falling or staying asleep, Excessive daytime sleepiness, Snoring, Restless legs"
30 | Thyroid Disorders,"Fatigue, Weight changes, Mood swings, Hair loss"
31 | Skin Conditions,"Itchy, red"


--------------------------------------------------------------------------------
/Backend/api/apps.py:
--------------------------------------------------------------------------------
 1 | # api/apps.py
 2 | 
 3 | from django.apps import AppConfig
 4 | import os
 5 | import sys # Keep sys if you want to use sys.argv checks, though less necessary here
 6 | 
 7 | # --- Import your Web3 initialization function ---
 8 | # This path is relative to your project root, or absolute within the Python path.
 9 | # Based on your structure, `api.web3.blockchain_handler` seems correct.
10 | try:
11 |     # Import the initialization function and the w3 object for status check
12 |     from api.web3.blockchain_handler import initialize_web3, w3
13 |     print("[api.apps.py] Successfully imported Web3 components from api.web3.blockchain_handler.")
14 |     web3_components_imported = True # Flag to indicate successful import
15 | except ImportError as e:
16 |     print(f"[api.apps.py] WARNING: Could not import Web3 components from api.web3.blockchain_handler. Error: {e}")
17 |     print("Please ensure api/web3/blockchain_handler.py exists and contains initialize_web3 and w3.")
18 |     web3_components_imported = False # Flag to indicate import failed
19 |     initialize_web3 = None # Ensure the function name isn't defined if import fails
20 |     w3 = None # Same for the w3 object
21 | 
22 | class ApiConfig(AppConfig):
23 |     default_auto_field = 'django.db.models.BigAutoField'
24 |     name = 'api'
25 | 
26 |     def ready(self):
27 |         """
28 |         This method is called when Django starts up and loads all apps.
29 |         It's the correct place for application-specific startup code in production.
30 |         """
31 |         # This check prevents initialization during Django setup itself,
32 |         # ensuring it happens only after apps are fully loaded.
33 |         if os.environ.get('RUN_MAIN', None) != 'true':
34 |              print("[api.apps.py] Running Django setup, skipping Web3 initialization in ready().")
35 |              return
36 | 
37 |         print("[api.apps.py] AppConfig ready() method called.")
38 | 
39 |         # Check if the Web3 components were imported successfully
40 |         if not web3_components_imported:
41 |              print("[api.apps.py] Skipping Web3 initialization in ready() due to import failure.")
42 |              return # Exit the ready method if import failed
43 | 
44 |         # In a production WSGI environment (like Gunicorn), ready() is called once per worker process.
45 |         # We typically want Web3 initialized for each worker.
46 |         # The sys.argv check is less critical here compared to manage.py,
47 |         # as ready() is generally called when the application is actually starting to serve.
48 |         # You can simplify this to just: if initialize_web3: initialize_web3()
49 | 
50 |         print(f"[api.apps.py] Calling initialize_web3 in ready()...")
51 |         if not initialize_web3():
52 |             print("[api.apps.py] FATAL ERROR: Web3 initialization failed during AppConfig ready(). Blockchain features may be unavailable.")
53 |         else:
54 |             print("[api.apps.py] Web3 initialization finished successfully in ready().")
55 | 
56 |         # Optional: You can add checks here if you need Web3 for specific commands
57 |         # is_running_server = 'runserver' in sys.argv or 'gunicorn' in sys.argv or 'uvicorn' in sys.argv
58 |         # is_running_qcluster = 'qcluster' in sys.argv
59 |         # if (is_running_server or is_running_qcluster) and initialize_web3:
60 |         #    ... initialization logic ...


--------------------------------------------------------------------------------
/Frontend/Footer.css:
--------------------------------------------------------------------------------
  1 | 
  2 | 
  3 | .content {
  4 |     flex: 1;
  5 |     padding: 20px;
  6 | }
  7 | 
  8 | .footer {
  9 |   
 10 |     color: #fff;
 11 |     padding: 40px 0;
 12 | }
 13 | 
 14 | .footer-container {
 15 |     max-width: 1200px;
 16 |     margin: 0 auto;
 17 |     padding: 0 20px;
 18 | }
 19 | 
 20 | .footer-content {
 21 |     display: flex;
 22 |     flex-wrap: wrap;
 23 |     justify-content: space-between;
 24 |     gap: 30px;
 25 | }
 26 | 
 27 | 
 28 | 
 29 | 
 30 | 
 31 | 
 32 | .footer-logo {
 33 |     flex: 1;
 34 |     min-width: 250px;
 35 | }
 36 | 
 37 | .footer-logo h2 {
 38 |     font-size: 28px;
 39 |     margin-bottom: 15px;
 40 |     color: #fff;
 41 | }
 42 | 
 43 | .footer-logo span {
 44 |     color: #3498db;
 45 | }
 46 | 
 47 | .footer-logo p {
 48 |     color: #ccc;
 49 |     line-height: 1.6;
 50 | }
 51 | 
 52 | .footer-links {
 53 |     flex: 1;
 54 |     min-width: 250px;
 55 | }
 56 | 
 57 | .footer-links h3 {
 58 |     font-size: 18px;
 59 |     margin-bottom: 20px;
 60 |     color: #3498db;
 61 |     position: relative;
 62 | }
 63 | 
 64 | 
 65 | 
 66 | 
 67 | 
 68 | 
 69 | 
 70 | 
 71 | 
 72 | .footer-links h3::after {
 73 |     content: '';
 74 |     position: absolute;
 75 |     left: 0;
 76 |     bottom: -8px;
 77 |     width: 50px;
 78 |     height: 2px;
 79 |     background-color: #3498db;
 80 | }
 81 | 
 82 | .footer-links ul {
 83 |     list-style: none;
 84 | }
 85 | 
 86 | .footer-links ul li {
 87 |     margin-bottom: 12px;
 88 | }
 89 | 
 90 | .footer-links ul li a {
 91 |     color: #fff;
 92 |     text-decoration: none;
 93 |     transition: all 0.3s ease;
 94 | }
 95 | 
 96 | .footer-links ul li a:hover {
 97 |     color: #3498db;
 98 |     padding-left: 5px;
 99 | }
100 | 
101 | .footer-social {
102 |     flex: 1;
103 |     min-width: 250px;
104 | }
105 | 
106 | .footer-social h3 {
107 |     font-size: 18px;
108 |  
109 |     color: #3498db;
110 |     position: relative;
111 | }
112 | 
113 | .footer-social h3::after {
114 |     content: '';
115 |     position: absolute;
116 |     left: 0;
117 |     bottom: -8px;
118 |     width: 50px;
119 |     height: 2px;
120 |     background-color: #3498db;
121 | }
122 | 
123 | 
124 | 
125 | 
126 | 
127 | 
128 | 
129 | 
130 | 
131 | 
132 | 
133 | 
134 | 
135 | .social-icons {
136 |     display: flex;
137 |     gap: 9px;
138 |     margin-top: 20px;
139 | }
140 | 
141 | .social-icons a {
142 |     display: flex;
143 |     align-items: center;
144 |     justify-content: center;
145 |     width: 40px;
146 |     height: 40px;
147 |     border-radius: 50%;
148 |     background-color: #222;
149 |     color: #fff;
150 |     text-decoration: none;
151 |     transition: all 0.3s ease;
152 | }
153 | 
154 | .social-icons a:hover {
155 |     background-color: #3498db;
156 |     transform: translateY(-5px);
157 | }
158 | 
159 | .footer-bottom {
160 |     margin-top: 30px;
161 |     padding-top: 20px;
162 |     border-top: 1px solid #222;
163 |     text-align: center;
164 | }
165 | 
166 | .footer-bottom p {
167 |     color: #ccc;
168 | }
169 | 
170 | .footer-bottom p a {
171 |     color: #3498db;
172 |     text-decoration: none;
173 | }
174 | 
175 | @media (max-width: 768px) {
176 |     .footer-content {
177 |         flex-direction: column;
178 |     }
179 |    
180 |     .footer-logo, .footer-links, .footer-social {
181 |         width: 100%;
182 |     }
183 | }
184 | 
185 | 
186 | 
187 | 


--------------------------------------------------------------------------------
/Backend/catalyst/settings.py:
--------------------------------------------------------------------------------
  1 | """
  2 | Django settings for catalyst project.
  3 | 
  4 | Generated by 'django-admin startproject' using Django 5.1.6.
  5 | 
  6 | For more information on this file, see
  7 | https://docs.djangoproject.com/en/5.1/topics/settings/
  8 | 
  9 | For the full list of settings and their values, see
 10 | https://docs.djangoproject.com/en/5.1/ref/settings/
 11 | """
 12 | 
 13 | from pathlib import Path
 14 | import os
 15 | # Build paths inside the project like this: BASE_DIR / 'subdir'.
 16 | BASE_DIR = Path(__file__).resolve().parent.parent
 17 | 
 18 | # Quick-start development settings - unsuitable for production
 19 | # See https://docs.djangoproject.com/en/5.1/howto/deployment/checklist/
 20 | 
 21 | # SECURITY WARNING: keep the secret key used in production secret!
 22 | SECRET_KEY = 'django-insecure-fj11uc8$d546zp(omj_9q#0jxxsta)b7voag25rw-%px+@n(qq'
 23 | 
 24 | # SECURITY WARNING: don't run with debug turned on in production!
 25 | DEBUG = True
 26 | 
 27 | ALLOWED_HOSTS = []
 28 | 
 29 | 
 30 | # Application definition
 31 | 
 32 | INSTALLED_APPS = [
 33 |     'django.contrib.admin',
 34 |     'django.contrib.auth',
 35 |     'django.contrib.contenttypes',
 36 |     'django.contrib.sessions',
 37 |     'django.contrib.messages',
 38 |     'django.contrib.staticfiles',
 39 |     'rest_framework',
 40 |     'corsheaders',
 41 |     'base',
 42 | ]
 43 | 
 44 | MIDDLEWARE = [
 45 |     'corsheaders.middleware.CorsMiddleware',
 46 |     'django.middleware.security.SecurityMiddleware',
 47 |     'django.contrib.sessions.middleware.SessionMiddleware',
 48 |     'django.middleware.common.CommonMiddleware',
 49 |       'django.middleware.csrf.CsrfViewMiddleware', 
 50 |     'django.middleware.csrf.CsrfViewMiddleware',
 51 |     'django.contrib.auth.middleware.AuthenticationMiddleware',
 52 |     'django.contrib.messages.middleware.MessageMiddleware',
 53 |     'django.middleware.clickjacking.XFrameOptionsMiddleware',
 54 | ]
 55 | 
 56 | ROOT_URLCONF = 'catalyst.urls'
 57 | 
 58 | TEMPLATES = [
 59 |     {
 60 |         'BACKEND': 'django.template.backends.django.DjangoTemplates',
 61 |         'DIRS': [],
 62 |         'APP_DIRS': True,
 63 |         'OPTIONS': {
 64 |             'context_processors': [
 65 |                 'django.template.context_processors.debug',
 66 |                 'django.template.context_processors.request',
 67 |                 'django.contrib.auth.context_processors.auth',
 68 |                 'django.contrib.messages.context_processors.messages',
 69 |             ],
 70 |         },
 71 |     },
 72 | ]
 73 | 
 74 | WSGI_APPLICATION = 'catalyst.wsgi.application'
 75 | 
 76 | 
 77 | # Database
 78 | # https://docs.djangoproject.com/en/5.1/ref/settings/#databases
 79 | 
 80 | DATABASES = {
 81 |     'default': {
 82 |         'ENGINE': 'django.db.backends.sqlite3',
 83 |         'NAME': BASE_DIR / 'db.sqlite3',
 84 |     }
 85 | }
 86 | 
 87 | 
 88 | # Password validation
 89 | # https://docs.djangoproject.com/en/5.1/ref/settings/#auth-password-validators
 90 | 
 91 | AUTH_PASSWORD_VALIDATORS = [
 92 |     {
 93 |         'NAME': 'django.contrib.auth.password_validation.UserAttributeSimilarityValidator',
 94 |     },
 95 |     {
 96 |         'NAME': 'django.contrib.auth.password_validation.MinimumLengthValidator',
 97 |     },
 98 |     {
 99 |         'NAME': 'django.contrib.auth.password_validation.CommonPasswordValidator',
100 |     },
101 |     {
102 |         'NAME': 'django.contrib.auth.password_validation.NumericPasswordValidator',
103 |     },
104 | ]
105 | 
106 | 
107 | # Internationalization
108 | # https://docs.djangoproject.com/en/5.1/topics/i18n/
109 | 
110 | LANGUAGE_CODE = 'en-us'
111 | 
112 | TIME_ZONE = 'UTC'
113 | 
114 | USE_I18N = True
115 | 
116 | USE_TZ = True
117 | 
118 | 
119 | # Static files (CSS, JavaScript, Images)
120 | # https://docs.djangoproject.com/en/5.1/howto/static-files/
121 | 
122 | STATIC_URL = 'static/'
123 | 
124 | # Default primary key field type
125 | # https://docs.djangoproject.com/en/5.1/ref/settings/#default-auto-field
126 | 
127 | DEFAULT_AUTO_FIELD = 'django.db.models.BigAutoField'
128 | 
129 | 
130 | MEDIA_URL = '/media/'
131 | MEDIA_ROOT = os.path.join(BASE_DIR, 'media')
132 |       
133 | CORS_ALLOW_ALL_ORIGINS = True
134 | 
135 |     


--------------------------------------------------------------------------------
/Frontend/Main.css:
--------------------------------------------------------------------------------
  1 | /* --- Basic Container Styling (Include if not defined elsewhere) --- */
  2 | .container {
  3 |     width: 100%;
  4 |     padding-right: 15px;
  5 |     padding-left: 15px;
  6 |     margin-right: auto;
  7 |     margin-left: auto;
  8 |   }
  9 |   
 10 |   @media (min-width: 576px) { .container { max-width: 540px; } }
 11 |   @media (min-width: 768px) { .container { max-width: 720px; } }
 12 |   @media (min-width: 992px) { .container { max-width: 960px; } }
 13 |   @media (min-width: 1200px) { .container { max-width: 1140px; } }
 14 |   
 15 |   
 16 |   /* --- Vision Section Styling --- */
 17 |   .vision {
 18 |     padding: 60px 0; /* Vertical padding */
 19 |     background-color: #fff; /* Or choose a light background like #f8f9fa */
 20 |     border-top: 1px solid #e9ecef; /* Optional separator line */
 21 |   }
 22 |   
 23 |   /* --- Section Header --- */
 24 |   .section-header {
 25 |     text-align: center;
 26 |     margin-bottom: 50px; /* Space below the header */
 27 |   }
 28 |   
 29 |   .section-header h2 {
 30 |     font-size: 2.8rem;   /* Adjust size */
 31 |     font-weight: 700;    /* Adjust weight for Druk font */
 32 |     color: #212529;      /* Dark text color */
 33 |     margin-bottom: 15px;
 34 |     line-height: 1.2;
 35 |   }
 36 |   
 37 |   /* Apply the Druk font specifically */
 38 |   .section-header .druk-font {
 39 |     font-family: 'Druk', sans-serif; /* Use Druk font with a fallback */
 40 |     /* Add specific Druk styles if needed (e.g., letter-spacing) */
 41 |   }
 42 |   
 43 |   .section-header p {
 44 |     font-size: 1.1rem;
 45 |     color: #6c757d;      /* Lighter text color for subtitle */
 46 |     max-width: 700px;    /* Limit width for better readability */
 47 |     margin: 0 auto;      /* Center the paragraph */
 48 |     line-height: 1.6;
 49 |     font-family: sans-serif; /* Use a standard readable font for the paragraph */
 50 |   }
 51 |   
 52 |   /* Style for .dark header variant (adjust if needed based on background) */
 53 |   .section-header.dark h2 {
 54 |     color: #212529; /* Ensure dark text on light background */
 55 |   }
 56 |   .section-header.dark p {
 57 |     color: #6c757d; /* Ensure lighter text on light background */
 58 |   }
 59 |   
 60 |   /* --- Vision Grid Layout --- */
 61 |   .vision-grid {
 62 |     display: grid;
 63 |     gap: 30px; /* Space between grid items */
 64 |   }
 65 |   
 66 |   /* --- Vision Item Styling --- */
 67 |   .vision-item {
 68 |     background-color: #f8f9fa; /* Slightly off-white background for items */
 69 |     padding: 35px 30px;       /* Padding inside each item */
 70 |     text-align: center;
 71 |     border-radius: 8px;       /* Rounded corners */
 72 |     border: 1px solid #dee2e6; /* Subtle border */
 73 |     transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
 74 |     /* Add smooth transition for hover effects */
 75 |   }
 76 |   
 77 |   .vision-item:hover {
 78 |     transform: translateY(-5px); /* Slight lift effect on hover */
 79 |     box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1); /* Add shadow on hover */
 80 |     border-color: #007bff; /* Optional: Highlight border on hover */
 81 |   }
 82 |   
 83 |   /* --- Vision Icon Styling --- */
 84 |   .vision-icon {
 85 |     margin: 0 auto 25px auto; /* Center horizontally, add space below icon */
 86 |     width: 65px;             /* Icon container width */
 87 |     height: 65px;            /* Icon container height */
 88 |     border-radius: 50%;      /* Make it circular */
 89 |     background-color: #eaf2ff; /* Light blue background for icon container */
 90 |     display: flex;           /* Use flexbox for centering */
 91 |     justify-content: center; /* Center icon horizontally */
 92 |     align-items: center;     /* Center icon vertically */
 93 |     color: #007bff;          /* Icon color (e.g., primary blue) */
 94 |     font-size: 1.8rem;       /* Icon size */
 95 |     transition: background-color 0.3s ease, color 0.3s ease; /* Smooth transition */
 96 |   }
 97 |   
 98 |   /* Change icon style on parent hover */
 99 |   .vision-item:hover .vision-icon {
100 |     background-color: #007bff; /* Primary color background on hover */
101 |     color: #fff;              /* White icon color on hover */
102 |   }
103 |   
104 |   /* --- Vision Item Text Styling --- */
105 |   .vision-item h3 {
106 |     font-size: 1.25rem;
107 |     font-weight: 600;
108 |     color: #343a40;      /* Slightly darker text for heading */
109 |     margin-bottom: 10px;
110 |     font-family: sans-serif; /* Use a standard readable font */
111 |   }
112 |   
113 |   .vision-item p {
114 |     font-size: 0.95rem;
115 |     color: #6c757d;      /* Lighter text color for paragraph */
116 |     line-height: 1.6;
117 |     font-family: sans-serif; /* Use a standard readable font */
118 |   }
119 |   
120 |   
121 |   /* --- Responsiveness --- */
122 |   
123 |   /* Default: 1 column (Mobile First approach) */
124 |   .vision-grid {
125 |     grid-template-columns: 1fr;
126 |   }
127 |   
128 |   /* Medium devices (tablets, 768px and up) */
129 |   @media (min-width: 768px) {
130 |     .vision-grid {
131 |       grid-template-columns: repeat(2, 1fr); /* 2 columns */
132 |     }
133 |      .section-header h2 {
134 |        font-size: 3rem;
135 |      }
136 |      .section-header p {
137 |        font-size: 1.15rem;
138 |      }
139 |   }
140 |   
141 |   /* Large devices (desktops, 992px and up) */
142 |   @media (min-width: 992px) {
143 |     .vision-grid {
144 |       grid-template-columns: repeat(4, 1fr); /* 4 columns */
145 |     }
146 |      .section-header h2 {
147 |        font-size: 3.2rem;
148 |      }
149 |   }
150 |   
151 |   /* Optional: Adjustments for very small screens */
152 |   @media (max-width: 575.98px) {
153 |      .section-header h2 {
154 |        font-size: 2.2rem; /* Smaller heading on small screens */
155 |      }
156 |       .section-header p {
157 |        font-size: 1rem;
158 |      }
159 |      .vision-item {
160 |        padding: 25px 20px; /* Reduce padding slightly */
161 |      }
162 |      .vision-icon {
163 |        width: 60px;
164 |        height: 60px;
165 |        font-size: 1.7rem;
166 |      }
167 |      .vision-item h3 {
168 |        font-size: 1.15rem;
169 |      }
170 |      .vision-item p {
171 |        font-size: 0.9rem;
172 |      }
173 |   }


--------------------------------------------------------------------------------
/Backend/api/web3/blockchain_handler.py:
--------------------------------------------------------------------------------
  1 | import os
  2 | import json
  3 | import hashlib
  4 | from web3 import Web3
  5 | from eth_account import Account
  6 | from web3.exceptions import TransactionNotFound, ContractLogicError
  7 | from pathlib import Path
  8 | 
  9 | current_dir = Path(__file__).resolve()
 10 | parent_dir = current_dir.parents[0]
 11 | 
 12 | HOLESKY_RPC_URL = 'https://rpc.ankr.com/eth_holesky'
 13 | CONTRACT_ADDRESS = ''
 14 | BACKEND_PRIVATE_KEY = ''
 15 | ABI_FILE_PATH = f'{parent_dir}/SimpleBackendRegistry.abi'
 16 | CONTRACT_ABI = None
 17 | 
 18 | try:
 19 |     with open(ABI_FILE_PATH, "r") as f:
 20 |         CONTRACT_ABI = json.load(f)
 21 | except FileNotFoundError:
 22 |     print(f"FATAL ERROR: ABI file not found at {ABI_FILE_PATH}")
 23 | 
 24 | 
 25 | w3 = None
 26 | contract = None
 27 | backend_account = None
 28 | BACKEND_ADDRESS = None
 29 | 
 30 | def initialize_web3():
 31 |     global w3, contract, backend_account, BACKEND_ADDRESS, CONTRACT_ABI
 32 | 
 33 |     if w3 is not None and w3.is_connected():
 34 |         return True
 35 | 
 36 |     try:
 37 |         w3 = Web3(Web3.HTTPProvider(HOLESKY_RPC_URL))
 38 |         if not w3.is_connected():
 39 |             raise ConnectionError(f"Failed to connect to Web3 RPC at {HOLESKY_RPC_URL}")
 40 |         print(f"Web3 connected to Chain ID: {w3.eth.chain_id}")
 41 | 
 42 |         if not BACKEND_PRIVATE_KEY or BACKEND_PRIVATE_KEY == "YOUR_BACKEND_WALLET_PRIVATE_KEY":
 43 |              print("FATAL ERROR: Backend private key is not configured.")
 44 |              return False
 45 | 
 46 |         backend_account = Account.from_key(BACKEND_PRIVATE_KEY)
 47 |         BACKEND_ADDRESS = backend_account.address
 48 |         print(f"Backend Wallet Address: {BACKEND_ADDRESS}")
 49 | 
 50 |         if not CONTRACT_ABI:
 51 |             print("FATAL ERROR: Contract ABI not loaded.")
 52 |             return False
 53 |         if not CONTRACT_ADDRESS or CONTRACT_ADDRESS == "YOUR_DEPLOYED_CONTRACT_ADDRESS":
 54 |             print("FATAL ERROR: Contract address is not configured.")
 55 |             return False
 56 | 
 57 |         contract = w3.eth.contract(address=CONTRACT_ADDRESS, abi=CONTRACT_ABI)
 58 |         print(f"Smart Contract loaded: {CONTRACT_ADDRESS}")
 59 | 
 60 |         return True
 61 | 
 62 |     except Exception as e:
 63 |         print(f"FATAL ERROR: Web3 Initialization failed: {e}")
 64 |         w3 = None
 65 |         contract = None
 66 |         backend_account = None
 67 |         BACKEND_ADDRESS = None
 68 |         return False
 69 | 
 70 | def hash_user_id_to_bytes32(user_id_string):
 71 |     user_id_str = str(user_id_string)
 72 |     hashed_bytes = hashlib.sha256(user_id_str.encode('utf-8')).digest()
 73 |     return hashed_bytes
 74 | 
 75 | def store_report_hash_on_chain(user_unique_id, ipfs_cid):
 76 |     if not w3 or not w3.is_connected() or not contract or not backend_account:
 77 |         print("Web3 is not initialized or connected. Cannot send transaction.")
 78 |         return None, "Web3 not initialized or connected"
 79 | 
 80 |     try:
 81 |         user_id_hash = hash_user_id_to_bytes32(user_unique_id)
 82 |         print(f"Preparing to store CID {ipfs_cid} for hashed user ID: {user_id_hash.hex()}")
 83 | 
 84 |         nonce = w3.eth.get_transaction_count(BACKEND_ADDRESS)
 85 |         print(f"Using nonce: {nonce}")
 86 | 
 87 |         gas_price = w3.eth.gas_price
 88 |         print(f"Current gas price: {w3.from_wei(gas_price, 'gwei')} Gwei")
 89 | 
 90 |         transaction = contract.functions.storeReportHash(
 91 |             user_id_hash,
 92 |             ipfs_cid
 93 |         ).build_transaction({
 94 |             'chainId': w3.eth.chain_id,
 95 |             'gasPrice': gas_price,
 96 |             'from': BACKEND_ADDRESS,
 97 |             'nonce': nonce,
 98 |         })
 99 | 
100 |         signed_txn = backend_account.sign_transaction(transaction)
101 |         print("Transaction signed.")
102 | 
103 |         tx_hash = w3.eth.send_raw_transaction(signed_txn.raw_transaction)
104 |         print(f"Transaction sent. Hash: {tx_hash.hex()}")
105 | 
106 |         try:
107 |              print("Waiting for transaction confirmation...")
108 |              transaction_receipt = w3.eth.wait_for_transaction_receipt(tx_hash, timeout=120)
109 |              print(f"Transaction confirmed in block {transaction_receipt.blockNumber}")
110 |              if transaction_receipt.status == 1:
111 |                  print("Transaction successful.")
112 |                  return tx_hash.hex(), None
113 |              else:
114 |                  print("Transaction failed on chain (status != 1).")
115 |                  return None, f"Transaction failed on chain, receipt status: {transaction_receipt.status}"
116 | 
117 |         except TransactionNotFound:
118 |              print("Transaction not found after waiting (might still be pending).")
119 |              return tx_hash.hex(), "Transaction sent but timed out waiting for confirmation"
120 | 
121 |         except Exception as receipt_e:
122 |              print(f"Error while waiting for transaction receipt: {receipt_e}")
123 |              return tx_hash.hex(), f"Transaction sent but error waiting for receipt: {receipt_e}"
124 | 
125 | 
126 |     except ContractLogicError as e:
127 |          print(f"Smart contract reverted transaction: {e}")
128 |          return None, f"Smart contract execution failed: {e}"
129 | 
130 |     except Exception as e:
131 |         print(f"An error occurred during blockchain transaction: {e}")
132 |         return None, f"Failed to send blockchain transaction: {e}"
133 | 
134 | def get_stored_cid(user_unique_id):
135 |     if not w3 or not w3.is_connected() or not contract or not BACKEND_ADDRESS:
136 |         print("Web3 is not initialized or connected. Cannot retrieve data.")
137 |         return None, "Web3 not initialized or connected"
138 | 
139 |     try:
140 |         user_id_hash = hash_user_id_to_bytes32(user_unique_id)
141 |         print(f"Querying CID for hashed user ID: {user_id_hash.hex()}")
142 | 
143 |         stored_cid = contract.functions.backendReports(BACKEND_ADDRESS, user_id_hash).call()
144 | 
145 |         print(f"Retrieved CID: {stored_cid}")
146 |         if not stored_cid:
147 |             return None, "No CID found for this user ID under the backend address."
148 | 
149 |         return stored_cid, None 
150 | 
151 |     except Exception as e:
152 |         print(f"An error occurred during data retrieval: {e}")
153 |         return None, f"Failed to retrieve CID: {e}"
154 |     
155 | 


--------------------------------------------------------------------------------
/Backend/api/views.py:
--------------------------------------------------------------------------------
  1 | from rest_framework.response import Response
  2 | from rest_framework import parsers
  3 | from rest_framework.decorators import api_view, parser_classes
  4 | from base.models import Img
  5 | from .serializers import ImgSerializer, VideoSerializer, PdfSerializer
  6 | from .services import llm_handler, image_handler, video_handler, no_image_provided
  7 | from django.http import JsonResponse, HttpResponse
  8 | import json
  9 | from .prettify import prettify
 10 | from .web3 import pdfencrypt, uploadToIPFS
 11 | from .web3.blockchain_handler import store_report_hash_on_chain, initialize_web3, w3
 12 | from .web3.transactionVerification import Verify
 13 | import hashlib
 14 | from zipfile import ZipFile
 15 | import os
 16 | import pyminizip
 17 | from .zipfolder import zip
 18 | from django.utils.datastructures import MultiValueDictKeyError
 19 | 
 20 | @api_view(['POST'])
 21 | def query(request):
 22 |     print(request.data)
 23 |     question = request.data['content']
 24 |     Q = llm_handler.QueryResponse()
 25 |     responseFromLLM = Q.generateResponse(question)
 26 |     prettifiedStr = prettify.Prettify()
 27 |     prettyString = prettifiedStr.prettify_llm_json_string(responseFromLLM)
 28 |     # print(prettyString)
 29 |     # resDict = {'response': f'{prettyString}'}
 30 |     return HttpResponse(prettyString, status=200)
 31 | 
 32 | @api_view(['POST'])
 33 | @parser_classes([parsers.MultiPartParser, parsers.FormParser])
 34 | def ImgViewSet(request):
 35 |     print(request.data)
 36 |     try:
 37 |         img_loc =  request.data['image_url']
 38 |     except MultiValueDictKeyError as e:
 39 |         print("Image not found")
 40 |         img_loc = ""
 41 |     try:
 42 |         title = request.data['text_message']
 43 |     except MultiValueDictKeyError as e:
 44 |         print("Text not provided: ", e)
 45 |     if len(img_loc) < 1:
 46 |         n = no_image_provided.QueryResponse()
 47 |         res = n.generateResponse(title)
 48 |         prettifiedStr = prettify.Prettify()
 49 |         prettyString = prettifiedStr.prettify_llm_json_string(res)
 50 | 
 51 |         return HttpResponse(prettyString, status=200)
 52 | 
 53 |     serializer = ImgSerializer(data=request.data)
 54 |     if serializer.is_valid():
 55 |         serializer.save()
 56 |         poss = image_handler.PossibleDisease()
 57 |         diseases = poss.getDisease(img_loc)
 58 |         return HttpResponse(diseases, status=201)
 59 |     else:
 60 |         return HttpResponse(serializer.errors, status=400)
 61 | 
 62 | 
 63 | @api_view(['POST'])
 64 | def VideoViewSet(request):
 65 |     print(request.data)
 66 |     video_loc = request.data['video']
 67 |     serializer = VideoSerializer(data=request.data)
 68 |     request.session.save()
 69 |     user_unique_id = request.session.session_key
 70 |     if serializer.is_valid():
 71 |         serializer.save()
 72 |         res = video_handler.VideoHandler()
 73 |         possibleDisease = res.Response(video_loc)
 74 |         prettifiedStr = prettify.Prettify()
 75 |         prettyString = prettifiedStr.prettify_llm_json_string(possibleDisease)
 76 |         return HttpResponse(prettyString, status=201)
 77 | 
 78 | 
 79 | @api_view(['POST'])
 80 | def PdfViewSet(request):
 81 |     pdf_name = request.data['file']
 82 |     print(pdf_name)
 83 |     serializer = PdfSerializer(data=request.data)
 84 |     if serializer.is_valid():
 85 |         ipfs_cid = None
 86 |         pinata_upload_error = None
 87 |         serializer.save()
 88 |         request.session.save()
 89 |         user_unique_id = request.session.session_key
 90 |         e = pdfencrypt.EncryptPdf()
 91 |         encryption_key_string = hashlib.sha256(user_unique_id.encode()).hexdigest()[:32]
 92 |         
 93 |         z = zip.zip_folder_with_password('/home/linuxer77/Programs/Hackathon-Project/Backend/media/', f'/home/linuxer77/Programs/Hackathon-Project/Backend/{encryption_key_string}.zip', 'pass', 5)
 94 |         loc = e.encrypt(pdf_name)
 95 |         jwt = ''
 96 |         p = uploadToIPFS.PinataUpload()
 97 |         pinata_result = p.uploadPinata(z, jwt)
 98 |         print(pinata_result)
 99 |         if pinata_result and 'IpfsHash' in pinata_result:
100 |             ipfs_cid = pinata_result['IpfsHash']
101 |             print(f"Pinata upload successful, CID: {ipfs_cid}")
102 |         else:
103 |             pinata_upload_error = f"Pinata API Error: {pinata_result.get('error', 'Unknown error details')}"
104 |             print(f"Pinata upload failed: {pinata_upload_error}")
105 |         
106 |         tx_hash = None
107 |         blockchain_storage_error = None
108 | 
109 |         from .web3.blockchain_handler import w3
110 |         if ipfs_cid:
111 |             if w3 and w3.is_connected():
112 |                 print(f"Attempting to store CID {ipfs_cid} on chain for user ID: {user_unique_id}")
113 | 
114 |                 tx_hash, blockchain_storage_error = store_report_hash_on_chain(user_unique_id, ipfs_cid)
115 | 
116 |                 if tx_hash:
117 |                     print(f"Blockchain transaction initiated: {tx_hash}")
118 |                 else:
119 |                     print(f"Failed to initiate blockchain transaction: {blockchain_storage_error}")
120 |             else:
121 |                 print("Web3 not initialized/connected. Skipping blockchain storage.")
122 |                 blockchain_storage_error = "Web3 not initialized/connected. Check server logs."
123 | 
124 |         else:
125 |             print("Skipping blockchain storage as IPFS CID is not available.")
126 |             
127 | 
128 |         response_data = {
129 |             "status": "Processing Complete", 
130 |             "user_id_for_verification": user_unique_id, 
131 |             "encryption_key_derived": encryption_key_string, 
132 |             "ipfs_upload": {
133 |                 "success": ipfs_cid is not None,
134 |                 "cid": ipfs_cid,
135 |                 "error": pinata_upload_error,
136 |                 "ipfs_gateway_url": f"https://ipfs.io/ipfs/{ipfs_cid}" if ipfs_cid else None # Helpful URL
137 |             },
138 |             "blockchain_storage": {
139 |                 "success": tx_hash is not None,
140 |                 "tx_hash": tx_hash,
141 |                 "error": blockchain_storage_error,
142 |                 "block_explorer_url": f"https://holesky.etherscan.io/tx/{tx_hash}" if tx_hash else None # Helpful URL
143 |             }
144 |         }
145 | 
146 |         http_status = 201 
147 |         if ipfs_cid is None: 
148 |             http_status = 500 
149 | 
150 |         return JsonResponse(response_data, status=http_status)
151 | 
152 | 
153 | @api_view(['POST'])
154 | def VerifyTxn(request):
155 |     trxn_hash = request.data['hash']
156 |     print(trxn_hash)
157 |     v = Verify()
158 |     trxn_data = v.trxn_verify(trxn_hash)
159 |     trxn_data = dict(trxn_data)
160 |     resDict = {'response': f'{trxn_data}'}
161 |     print(resDict)
162 |     print(JsonResponse(resDict, status=201))
163 |     return JsonResponse(resDict, status=201)
164 | 


--------------------------------------------------------------------------------
/Frontend/Readme.md:
--------------------------------------------------------------------------------
  1 | 
  2 | # DiagnoAI - Medical Diagnosis Platform
  3 | 
  4 | ## Overview
  5 | 
  6 | DiagnoAI is a comprehensive web-based medical diagnosis platform that combines interactive symptom checking, AI-driven diagnostics, personalized wellness plans, and blockchain-based transaction verification. The platform empowers users to identify potential health conditions, access tailored health recommendations, and securely store medical reports. It features an intuitive interface with responsive design, suitable for both mobile and desktop users.
  7 | 
  8 | ## File Structure
  9 | 
 10 | 1. **index.html** - Main landing page with hero section and feature highlights.
 11 | 2. **FrontSYM.html** - Front view of the human body with interactive symptom checker.
 12 | 3. **BackSYM.html** - Back view of the human body with interactive symptom checker.
 13 | 4. **verify-trxn.html** - Blockchain transaction verification interface.
 14 | 5. **Vision.html** - "Our Services" page with detailed feature explanations.
 15 | 
 16 | ## Key Features
 17 | 
 18 | ### Core Functionality
 19 | 
 20 | 1. **Interactive Body Map Symptom Checker**:
 21 |    - Front and back human body views with clickable SVG diagrams.
 22 |    - Real-time diagnostic suggestions based on selected body parts (e.g., head, chest, back, legs).
 23 |    - Visual feedback with hover effects and color changes on selection.
 24 |    - Displays related conditions, symptoms, treatments, and severity indicators (low, medium, high).
 25 | 
 26 | 2. **Search Functionality**:
 27 |    - Search across all conditions and symptoms using a real-time filtering search bar.
 28 |    - Accessible on both `FrontSYM.html` and `BackSYM.html`.
 29 | 
 30 | 3. **Personalized Wellness Plans**:
 31 |    - AI-generated nutrition recommendations tailored to specific conditions.
 32 |    - Condition-specific fitness routines, including anti-inflammatory and joint-friendly options.
 33 | 
 34 | 4. **AI Image Analysis**:
 35 |    - X-ray and medical image interpretation with confidence percentage indicators.
 36 |    - Detection of potential health issues based on uploaded images.
 37 | 
 38 | 5. **Natural Language Diagnostics**:
 39 |    - Text-based symptom analysis via a chat-style interface.
 40 |    - Disease probability percentages with educational explanations.
 41 | 
 42 | 6. **Report Generation and Blockchain Integration**:
 43 |    - Generate PDF reports of selected conditions using the jsPDF library.
 44 |    - Upload reports to backend for IPFS/Blockchain storage via `/pdf` endpoint.
 45 |    - Display processing status, including IPFS CID and blockchain transaction hash.
 46 |    - Transaction verification interface (`verify-trxn.html`) for validating transaction hashes, showing status, block number, and addresses.
 47 | 
 48 | 7. **Specialist Recommendations**:
 49 |    - Provides doctor names, specialties, hospital information, and contact details.
 50 |    - Integrated into condition details for actionable follow-up.
 51 | 
 52 | 8. **Emergency Protocols**:
 53 |    - Dedicated section in `FrontSYM.html` for emergency guidance and first aid recommendations.
 54 |   
 55 | 9. **Video Chatbot**:
 56 |    - Video Messaging: Users can record and send video messages
 57 |    - Visual demonstration of physical symptoms
 58 | 
 59 | ### Technical Implementation
 60 | 
 61 | - **Frontend Technologies**:
 62 |   - HTML5, CSS3, JavaScript for core structure and interactivity.
 63 |   - Bootstrap for responsive layouts and mobile-friendly design.
 64 |   - GSAP for animations, scroll effects, and floating images in the hero section.
 65 |   - jsPDF for PDF report generation.
 66 |   - Font Awesome for icons and Google Fonts for custom typography.
 67 | 
 68 | - **Styling Features**:
 69 |   - Dark theme with customizable accent colors via CSS variables.
 70 |   - Animated transitions, hover effects, and scroll-triggered animations.
 71 |   - Media queries for adaptive layouts across device sizes.
 72 |   - Mobile menu toggles for smaller screens.
 73 | 
 74 | - **Backend Integration**:
 75 |   - PDF upload endpoint (`/pdf`) for IPFS/Blockchain storage.
 76 |   - Transaction verification API for blockchain data retrieval.
 77 |   - Error handling for network issues and backend failures.
 78 | 
 79 | - **Interactive Elements**:
 80 |   - Animated hero section with dynamic visuals.
 81 |   - Interactive body maps with SVG-based click regions.
 82 |   - Real-time search and filtering for conditions and symptoms.
 83 |   - Chat-style interface for natural language diagnostics.
 84 | 
 85 | ## Usage Instructions
 86 | 
 87 | 1. **Navigation**:
 88 |    - Use the consistent navbar across all pages to switch between sections: Home, Our Services (`Vision.html`), Front Symptoms (`FrontSYM.html`), Back Symptoms (`BackSYM.html`), and Transaction Verification (`verify-trxn.html`).
 89 | 
 90 | 2. **Symptom Checker**:
 91 |    - Open `FrontSYM.html` or `BackSYM.html` in a web browser.
 92 |    - Click on a body part in the interactive SVG diagram to view related conditions, symptoms, treatments, and first aid recommendations.
 93 |    - Alternatively, use the search bar to find conditions by name or symptom.
 94 |    - View specialist recommendations and severity indicators.
 95 | 
 96 | 3. **Report Generation**:
 97 |    - Click "Send Report" to generate a PDF of selected conditions.
 98 |    - The PDF is sent to the backend for IPFS/Blockchain storage.
 99 |    - Check the "Report Processing Status" section for IPFS CID and blockchain transaction hash.
100 | 
101 | 4. **Transaction Verification**:
102 |    - Navigate to `verify-trxn.html`.
103 |    - Enter a valid transaction hash in the input field and click "Verify".
104 |    - View transaction details, including status, block number, and addresses.
105 | 
106 | 5. **Wellness Plans and Image Analysis**:
107 |    - Access personalized nutrition and fitness plans via `Vision.html` or symptom checker pages.
108 |    - Upload medical images for AI-driven analysis, with results showing confidence percentages and potential issues.
109 | 
110 | ## Development Notes
111 | 
112 | 1. **Dependencies**:
113 |    - Ensure CDN links for Bootstrap, GSAP, Font Awesome, and jsPDF are accessible.
114 |    - Font imports from Google Fonts for consistent typography.
115 |    - Replace placeholder images with actual medical illustrations for production.
116 | 
117 | 2. **Customization**:
118 |    - Modify color schemes in CSS variables for branding consistency.
119 |    - Adjust GSAP animation timings for optimal user experience.
120 |    - Update the medical database (stored as JavaScript objects) to expand condition and symptom coverage.
121 | 
122 | 3. **Responsive Considerations**:
123 |    - Media queries ensure compatibility across device sizes.
124 |    - Stacked layouts and mobile menu toggles enhance usability on narrow viewports.
125 |    - Test thoroughly on mobile devices to ensure touch interactions work smoothly.
126 | 
127 | 4. **Error Handling**:
128 |    - Includes robust error handling for network issues, backend failures, and invalid transaction hashes.
129 |    - Displays user-friendly error messages and status indicators.
130 | 
131 | ## License
132 | 
133 | This project is proprietary code. All rights reserved by ACMECorp (as noted in the footer). For use or modification, please contact the project maintainers.
134 | 
135 | 
136 | 


--------------------------------------------------------------------------------
/Frontend/Feature.css:
--------------------------------------------------------------------------------
  1 | /* Features Section */
  2 | .features {
  3 |     padding: 80px 0;
  4 |     background-color: #1e1e1e; /* Dark background */
  5 | }
  6 | 
  7 | .feature-card {
  8 |     display: flex;
  9 |     align-items: center;
 10 |     margin-bottom: 100px;
 11 |     background-color: #1e1e1e;
 12 |     border-radius: 8px;
 13 |     box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
 14 |     overflow: hidden;
 15 | }
 16 | 
 17 | .feature-card.reverse {
 18 |     flex-direction: row-reverse;
 19 | }
 20 | 
 21 | .feature-content {
 22 |     flex: 1;
 23 |     padding: 40px;
 24 | }
 25 | 
 26 | 
 27 | .feature-icon {
 28 |     width: 70px;
 29 |     height: 70px;
 30 |     background-color: #4fc3f7; /* Light blue */
 31 |     color: white;
 32 |     border-radius: 50%;
 33 |     display: flex;
 34 |     align-items: center;
 35 |     justify-content: center;
 36 |     font-size: 1.8rem;
 37 |     margin-bottom: 20px;
 38 | }
 39 | 
 40 | .feature-content h3 {
 41 |     font-size: 2rem;
 42 |     color: #4fc3f7; /* Light blue */
 43 |     margin-bottom: 5px;
 44 | }
 45 | 
 46 | .feature-content h4 {
 47 |     font-size: 1.2rem;
 48 |     color: #4fc3f7; /* Light blue */
 49 |     margin-bottom: 20px;
 50 |     font-weight: 500;
 51 | }
 52 | 
 53 | .feature-content p {
 54 |     color: #b0b0b0; /* Light gray */
 55 |     margin-bottom: 20px;
 56 | }
 57 | 
 58 | .feature-benefits {
 59 |     margin: 20px 0;
 60 | }
 61 | 
 62 | .feature-benefits li {
 63 |     margin-bottom: 10px;
 64 |     display: flex;
 65 |     align-items: center;
 66 |     color: #ffffff;
 67 | }
 68 | 
 69 | .feature-benefits li i {
 70 |     color: #81c784; /* Soft green */
 71 |     margin-right: 10px;
 72 | }
 73 | 
 74 | .feature-image {
 75 |     flex: 1;
 76 |     padding: 40px;
 77 |     display: flex;
 78 |     flex-direction: column;
 79 |     align-items: center;
 80 |     justify-content: center;
 81 |     background-color: #1e1e1e;
 82 |     position: relative;
 83 |     min-height: 400px;
 84 | }
 85 | 
 86 | /* Body Map Styles (for Symptom Checker) */
 87 | .body-map-container {
 88 |     position: relative;
 89 |     width: 300px;
 90 |     height: 500px;
 91 |     background-color: #121212;
 92 |     border-radius: 8px;
 93 |     box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
 94 |     margin-bottom: 20px;
 95 | }
 96 | 
 97 | .body-map {
 98 |     position: absolute;
 99 |     top: 0;
100 |     left: 0;
101 |     width: 100%;
102 |     height: 100%;
103 |     background-size: contain;
104 |     background-repeat: no-repeat;
105 |     background-position: center;
106 |     opacity: 0;
107 |     transition: opacity 0.5s ease;
108 | }
109 | 
110 | .body-map.active {
111 |     opacity: 1;
112 | }
113 | 
114 | .view-toggle {
115 |     display: flex;
116 |     gap: 10px;
117 | }
118 | 
119 | .view-toggle button {
120 |     padding: 8px 15px;
121 |     background-color: #f1f1f1;
122 |     border: none;
123 |     border-radius: 4px;
124 |     cursor: pointer;
125 |     transition: all 0.3s ease;
126 | }
127 | 
128 | .view-toggle button.active {
129 |     background-color: #4fc3f7; /* Light blue */
130 |     color: white;
131 | }
132 | 
133 | /* Nutrition Cards (for Fitness Model) */
134 | .nutrition-cards {
135 |     display: flex;
136 |     gap: 15px;
137 |     margin-top: 20px;
138 | }
139 | 
140 | .nutrition-card {
141 |     background-color: #121212;
142 |     color: white;
143 |     border-radius: 8px;
144 |     padding: 15px;
145 |     box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
146 |     text-align: center;
147 |     flex: 1;
148 | }
149 | 
150 | .nutrition-icon {
151 |     width: 50px;
152 |     height: 50px;
153 |     background-color: rgba(0, 168, 204, 0.1);
154 |     color: #4fc3f7; /* Light blue */
155 |     border-radius: 50%;
156 |     display: flex;
157 |     align-items: center;
158 |     justify-content: center;
159 |     font-size: 1.5rem;
160 |     margin: 0 auto 10px;
161 | }
162 | 
163 | .nutrition-card h5 {
164 |     font-size: 1rem;
165 |     color: #ffffff;
166 | }
167 | 
168 | /* X-ray Analysis (for Chatbot Xray) */
169 | .xray-analysis {
170 |     width: 100%;
171 |     max-width: 400px;
172 | }
173 | 
174 | .xray-image {
175 |     position: relative;
176 |     border-radius: 8px;
177 |     overflow: hidden;
178 |     margin-bottom: 20px;
179 | }
180 | 
181 | .analysis-marker {
182 |     position: absolute;
183 |     width: 30px;
184 |     height: 30px;
185 |     border: 3px solid #4fc3f7; /* Light blue */
186 |     border-radius: 50%;
187 |     transform: translate(-50%, -50%);
188 |     animation: pulse 2s infinite;
189 | }
190 | 
191 | .analysis-results {
192 |     background-color: white;
193 |     border-radius: 8px;
194 |     box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
195 |     overflow: hidden;
196 | }
197 | 
198 | .result-item {
199 |     display: flex;
200 |     align-items: center;
201 |     padding: 15px;
202 |     border-bottom: 1px solid #eee;
203 | }
204 | 
205 | .result-item:last-child {
206 |     border-bottom: none;
207 | }
208 | 
209 | .result-icon {
210 |     width: 40px;
211 |     height: 40px;
212 |     background-color: rgba(95, 39, 205, 0.1);
213 |     color: #64b5f6; /* Secondary light blue */
214 |     border-radius: 50%;
215 |     display: flex;
216 |     align-items: center;
217 |     justify-content: center;
218 |     font-size: 1.2rem;
219 |     margin-right: 15px;
220 | }
221 | 
222 | .result-text h5 {
223 |     font-size: 1rem;
224 |     margin-bottom: 5px;
225 | }
226 | 
227 | .confidence {
228 |     font-size: 0.9rem;
229 |     color: #b0b0b0; /* Light gray */
230 | }
231 | 
232 | /* Chat Interface (for TextXray) */
233 | .chat-interface {
234 |     width: 100%;
235 |     max-width: 400px;
236 |     background-color: white;
237 |     border-radius: 8px;
238 |     box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
239 |     overflow: hidden;
240 | }
241 | 
242 | .chat-header {
243 |     display: flex;
244 |     align-items: center;
245 |     padding: 15px;
246 |     background-color: #4fc3f7; /* Light blue */
247 |     color: white;
248 | }
249 | 
250 | .chat-avatar {
251 |     width: 40px;
252 |     height: 40px;
253 |     background-color: white;
254 |     color: #4fc3f7; /* Light blue */
255 |     border-radius: 50%;
256 |     display: flex;
257 |     align-items: center;
258 |     justify-content: center;
259 |     font-size: 1.2rem;
260 |     margin-right: 15px;
261 | }
262 | 
263 | .chat-title {
264 |     font-weight: 600;
265 |     font-size: 1.1rem;
266 | }
267 | 
268 | .chat-messages {
269 |     padding: 15px;
270 |     max-height: 300px;
271 |     overflow-y: auto;
272 | }
273 | 
274 | .message {
275 |     padding: 10px 15px;
276 |     border-radius: 18px;
277 |     margin-bottom: 10px;
278 |     max-width: 80%;
279 | }
280 | 
281 | .message.user {
282 |     background-color: #f1f1f1;
283 |     margin-left: auto;
284 |     border-bottom-right-radius: 4px;
285 | }
286 | 
287 | .message.bot {
288 |     background-color: #4fc3f7; /* Light blue */
289 |     color: white;
290 |     border-bottom-left-radius: 4px;
291 | }
292 | 
293 | .diagnosis-results {
294 |     margin: 15px 0;
295 | }
296 | 
297 | .diagnosis-item {
298 |     display: flex;
299 |     align-items: center;
300 |     background-color: white;
301 |     border: 1px solid #eee;
302 |     border-radius: 8px;
303 |     padding: 10px;
304 |     margin-bottom: 10px;
305 | }
306 | 
307 | .diagnosis-percentage {
308 |     width: 50px;
309 |     height: 50px;
310 |     background-color: #4fc3f7; /* Light blue */
311 |     color: white;
312 |     border-radius: 50%;
313 |     display: flex;
314 |     align-items: center;
315 |     justify-content: center;
316 |     font-weight: 600;
317 |     margin-right: 15px;
318 | }
319 | 
320 | .chat-input {
321 |     display: flex;
322 |     padding: 15px;
323 |     border-top: 1px solid #eee;
324 | }
325 | 
326 | .chat-input input {
327 |     flex: 1;
328 |     padding: 10px 15px;
329 |     border: 1px solid #ddd;
330 |     border-radius: 20px;
331 |     margin-right: 10px;
332 | }
333 | 
334 | .chat-input button {
335 |     width: 40px;
336 |     height: 40px;
337 |     background-color: #4fc3f7; /* Light blue */
338 |     color: white;
339 |     border: none;
340 |     border-radius: 50%;
341 |     cursor: pointer;
342 | }
343 | 
344 | /* Animation for pulse rings */
345 | @keyframes pulse {
346 |     0% {
347 |         box-shadow: 0 0 0 0 rgba(255, 107, 107, 0.7);
348 |     }
349 |     70% {
350 |         box-shadow: 0 0 0 10px rgba(255, 107, 107, 0);
351 |     }
352 |     100% {
353 |         box-shadow: 0 0 0 0 rgba(255, 107, 107, 0);
354 |     }
355 | }
356 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # CATALYSTxTESSERX
  2 | 
  3 | # DiagnoAI - Medical Diagnosis Platform
  4 | 
  5 | ## Overview
  6 | 
  7 | DiagnoAI is a comprehensive web-based medical diagnosis platform that integrates interactive symptom checking, AI-driven diagnostics, personalized wellness plans, and blockchain-based transaction verification. The platform empowers users to identify potential health conditions, access tailored health recommendations, and securely store medical reports. It features an intuitive, responsive interface suitable for both mobile and desktop users, with a robust backend to handle media processing, decentralized storage, and blockchain integration.
  8 | 
  9 | 
 10 | 
 11 | https://github.com/user-attachments/assets/cc42b882-e15b-41c6-aa87-47af05f2bd13
 12 | 
 13 | 
 14 | 
 15 | ## File Structure
 16 | 
 17 | ### Frontend
 18 | 1. **index.html** - Main landing page with hero section and feature highlights.
 19 | 2. **FrontSYM.html** - Front view of the human body with interactive symptom checker.
 20 | 3. **BackSYM.html** - Back view of the human body with interactive symptom checker.
 21 | 4. **verify-trxn.html** - Blockchain transaction verification interface.
 22 | 5. **Vision.html** - "Our Services" page with detailed feature explanations.
 23 | 
 24 | ### Backend
 25 | - **Django Project**: Core backend service with REST API endpoints.
 26 | - **db.sqlite3**: SQLite database for development.
 27 | - **requirements.txt**: Lists Python dependencies for backend setup.
 28 | 
 29 | ## Technology Stack
 30 | 
 31 | ### Frontend
 32 | - **HTML5, CSS3, JavaScript**: Core structure and interactivity.
 33 | - **Bootstrap**: Responsive layouts and mobile-friendly design.
 34 | - **GSAP**: Animations, scroll effects, and floating images in the hero section.
 35 | - **jsPDF**: PDF report generation.
 36 | - **Font Awesome**: Icons for UI elements.
 37 | - **Google Fonts**: Custom typography for consistent branding.
 38 | 
 39 | ### Backend
 40 | - **Framework**: Django with Django REST Framework.
 41 | - **Database**: SQLite (db.sqlite3) for development.
 42 | - **Storage**: IPFS for decentralized file storage.
 43 | - **Blockchain**: Web3 integration with Ethereum (SimpleBackendRegistry contract).
 44 | - **Dependencies**: Listed in `requirements.txt`.
 45 | 
 46 | ## Key Features
 47 | 
 48 | ### Frontend Features
 49 | 1. **Interactive Body Map Symptom Checker**:
 50 |    - Front and back human body views with clickable SVG diagrams (`FrontSYM.html`, `BackSYM.html`).
 51 |    - Real-time diagnostic suggestions based on selected body parts (e.g., head, chest, back, legs).
 52 |    - Visual feedback with hover effects and color changes on selection.
 53 |    - Displays related conditions, symptoms, treatments, and severity indicators (low, medium, high).
 54 | 
 55 | 2. **Search Functionality**:
 56 |    - Real-time filtering search bar for conditions and symptoms, accessible on `FrontSYM.html` and `BackSYM.html`.
 57 | 
 58 | 3. **Personalized Wellness Plans**:
 59 |    - AI-generated nutrition recommendations tailored to specific conditions.
 60 |    - Condition-specific fitness routines, including anti-inflammatory and joint-friendly options.
 61 | 
 62 | 4. **AI Image Analysis**:
 63 |    - X-ray and medical image interpretation with confidence percentage indicators.
 64 |    - Detection of potential health issues based on uploaded images.
 65 | 
 66 | 5. **Natural Language Diagnostics**:
 67 |    - Text-based symptom analysis via a chat-style interface.
 68 |    - Disease probability percentages with educational explanations.
 69 | 
 70 | 6. **Report Generation and Blockchain Integration for securing sensitive input data(image/video) for user input history**:
 71 |    - Generate PDF reports of selected conditions using jsPDF.
 72 |    - Upload video/image/reports to backend for IPFS/Blockchain storage via `/pdf` endpoint.
 73 |    - Display processing status, including IPFS CID and blockchain transaction hash.
 74 |    - Transaction verification interface (`verify-trxn.html`) for validating transaction hashes, showing status, block number, and addresses.
 75 | 
 76 | 7. **Specialist Recommendations**:
 77 |    - Provides doctor names, specialties, hospital information, and contact details.
 78 |    - Integrated into condition details for actionable follow-up.
 79 | 
 80 | 8. **Emergency Protocols**:
 81 |    - Dedicated section in `FrontSYM.html` for emergency guidance and first aid recommendations.
 82 | 
 83 | 9. **Video Chatbot**:
 84 |    - Video messaging for users to record and send visual demonstrations of physical symptoms.
 85 | 
 86 | ### Backend Features
 87 | 1. **Media Processing**:
 88 |    - Handles various media formats (Text, Image, Audio, Video, PDF) for diagnostic tools.
 89 |    - Serializers and services for data processing and validation.
 90 | 
 91 | 2. **Blockchain Integration**:
 92 |    - Secures medical video/image input reports using Ethereum smart contracts (SimpleBackendRegistry).
 93 |    - Generates verification IDs for patient records.
 94 | 
 95 | 3. **IPFS Storage**:
 96 |    - Decentralized storage for medical documents, accessible via `/pdf` endpoint.
 97 | 
 98 | 4. **Transaction Verification**:
 99 |    - Validates blockchain transactions for authenticity, supporting the `verify-trxn.html` interface.
100 | 
101 | 5. **Error Handling**:
102 |    - Robust error management for network issues, backend failures, and invalid transaction hashes.
103 | 
104 | ## API Endpoints
105 | - **/pdf**: Accepts PDF reports from the frontend for IPFS/Blockchain storage.
106 | - **Transaction Verification**: Retrieves blockchain data for transaction validation (e.g., status, block number, addresses).
107 | 
108 | ## Usage Instructions
109 | 
110 | ### Frontend
111 | 1. **Navigation**:
112 |    - Use the consistent navbar across all pages to switch between Home (`index.html`), Our Services (`Vision.html`), Front Symptoms (`FrontSYM.html`), Back Symptoms (`BackSYM.html`), and Transaction Verification (`verify-trxn.html`).
113 | 
114 | 2. **Symptom Checker**:
115 |    - Open `FrontSYM.html` or `BackSYM.html` in a web browser.
116 |    - Click on a body part in the interactive SVG diagram to view related conditions, symptoms, treatments, and first aid recommendations.
117 |    - Use the search bar to find conditions by name or symptom.
118 |    - View specialist recommendations and severity indicators.
119 | 
120 | 3. **Report Generation**:
121 |    - Click "Send Report" to generate a PDF of selected conditions.
122 |    - The PDF is sent to the backend for IPFS/Blockchain storage.
123 |    - Check the "Report Processing Status" section for IPFS CID and blockchain transaction hash.
124 | 
125 | 4. **Transaction Verification**:
126 |    - Navigate to `verify-trxn.html`.
127 |    - Enter a valid transaction hash in the input field and click "Verify".
128 |    - View transaction details, including status, block number, and addresses.
129 | 
130 | 5. **Wellness Plans and Image Analysis**:
131 |    - Access personalized nutrition and fitness plans via `Vision.html` or symptom checker pages.
132 |    - Upload medical images for AI-driven analysis, with results showing confidence percentages and potential issues.
133 | 
134 | ### Backend
135 | 1. **Setup**:
136 |    - Install dependencies: `pip install -r requirements.txt`.
137 |    - Run migrations: `python manage.py migrate`.
138 |    - Start the development server: `python manage.py runserver`.
139 | 
140 | 2. **Integration**:
141 |    - The backend supports frontend features like PDF report storage, blockchain transaction verification, and media file processing.
142 |    - Ensure the `/pdf` endpoint is accessible for report uploads and IPFS/Blockchain storage.
143 | 
144 | ## Development Notes
145 | 
146 | ### Frontend
147 | 1. **Dependencies**:
148 |    - Ensure CDN links for Bootstrap, GSAP, Font Awesome, and jsPDF are accessible.
149 |    - Font imports from Google Fonts for consistent typography.
150 |    - Replace placeholder images with actual medical illustrations for production.
151 | 
152 | 2. **Customization**:
153 |    - Modify color schemes in CSS variables for branding consistency.
154 |    - Adjust GSAP animation timings for optimal user experience.
155 |    - Update the medical database (stored as JavaScript objects) to expand condition and symptom coverage.
156 | 
157 | 3. **Responsive Considerations**:
158 |    - Media queries ensure compatibility across device sizes.
159 |    - Stacked layouts and mobile menu toggles enhance usability on narrow viewports.
160 |    - Test thoroughly on mobile devices to ensure touch interactions work smoothly.
161 | 
162 | 4. **Styling Features**:
163 |    - Dark theme with customizable accent colors via CSS variables.
164 |    - Animated transitions, hover effects, and scroll-triggered animations.
165 |    - Mobile menu toggles for smaller screens.
166 | 
167 | ### Backend
168 | 1. **Security Considerations**:
169 |    - Implements encryption for sensitive medical data.
170 |    - Uses blockchain for immutable record-keeping.
171 |    - Generates unique verification IDs for patient records.
172 | 
173 | 2. **Scalability**:
174 |    - SQLite is used for development; consider PostgreSQL or similar for production.
175 |    - Optimize IPFS and blockchain interactions for performance in high-traffic scenarios.
176 | 
177 | 3. **Error Handling**:
178 |    - Includes robust error handling for network issues, backend failures, and invalid transaction hashes.
179 |    - Displays user-friendly error messages and status indicators.
180 | 
181 | ## Security Considerations
182 | - **Frontend**: Secure handling of user inputs in search bars and chat interfaces to prevent injection attacks.
183 | - **Backend**: Encryption for sensitive medical data and immutable blockchain storage for report integrity.
184 | - **API**: Secure API endpoints with proper authentication and validation.
185 | 
186 | ## License
187 | This project is proprietary code. All rights reserved by ACMECorp. For inquiries about use or modification, contact the project maintainers.
188 | 
189 | 
190 | 


--------------------------------------------------------------------------------
/Frontend/in.html:
--------------------------------------------------------------------------------
  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>DiagnoAI - Video Analysis</title>
  7 |     <link rel="shortcut icon" href="Favi.png" type="image/x-icon">
  8 | 
  9 |     <link
 10 |       rel="stylesheet"
 11 |       href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
 12 |     />
 13 |     <style>
 14 |       /* Apollo-Inspired Color Palette */
 15 |       :root {
 16 |           --primary-color: #0B4F6C;       /* Professional Dark Blue */
 17 |           --primary-dark: #005f73;       /* Darker Blue/Teal for hover */
 18 |           --secondary-color: #01BAEF;   /* Bright Cyan/Blue Accent */
 19 |           --light-color: #ffffff;        /* White */
 20 |           --bg-light-gray: #f8f9fa;    /* Very Light Gray Background */
 21 |           --bg-medium-gray: #e9ecef;   /* Slightly Darker Gray (for user message) */
 22 |           --dark-color: #343a40;         /* Dark Gray */
 23 |           --text-color: #212529;         /* Near Black for body text */
 24 |           --text-light: #6c757d;         /* Medium Gray for secondary text */
 25 |           --success-color: #2A9D8F;      /* Calming Green */
 26 |           --warning-color: #F7B801;      /* Yellow/Gold */
 27 |           --danger-color: #D7263D;       /* Clear Red */
 28 |           --border-color: #dee2e6;       /* Light Gray for borders */
 29 |           --border-radius-lg: 12px;
 30 |           --border-radius-md: 8px;
 31 |           --border-radius-sm: 4px;
 32 |           --box-shadow: 0 4px 12px rgba(0,0,0,0.08);
 33 |           --transition: all 0.3s ease;
 34 |       }
 35 | 
 36 |       * {
 37 |         margin: 0;
 38 |         padding: 0;
 39 |         box-sizing: border-box;
 40 |         font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
 41 |       }
 42 | 
 43 |       html {
 44 |           height: 100%;
 45 |       }
 46 | 
 47 |       body {
 48 |         background-color: var(--bg-light-gray);
 49 |         color: var(--text-color);
 50 |         height: 100vh; /* Use full viewport height */
 51 |         display: flex;
 52 |         flex-direction: column; /* Stack potential header/footer */
 53 |         overflow: hidden; /* Prevent body scroll */
 54 |       }
 55 | 
 56 |       /* Main Application Wrapper */
 57 |       .app-wrapper {
 58 |         flex-grow: 1; /* Take available space */
 59 |         display: flex;
 60 |         justify-content: center;
 61 |         align-items: center;
 62 |         padding: 15px; /* Padding around the container */
 63 |          overflow: hidden; /* Prevent wrapper scroll */
 64 |       }
 65 | 
 66 | 
 67 |       .container {
 68 |         max-width: 1200px;
 69 |         width: 100%; /* Full width within wrapper */
 70 |         height: 100%; /* Full height within wrapper */
 71 |         max-height: 850px; /* Max height if needed */
 72 |         background-color: var(--light-color);
 73 |         border-radius: var(--border-radius-lg);
 74 |         box-shadow: var(--box-shadow);
 75 |         border: 1px solid var(--border-color);
 76 |         display: flex;
 77 |         flex-direction: column;
 78 |         overflow: hidden;
 79 |       }
 80 | 
 81 |       .header {
 82 |         background-color: var(--primary-color);
 83 |         color: white;
 84 |         padding: 12px 20px; /* Slightly reduced padding */
 85 |         border-bottom: none;
 86 |         display: flex;
 87 |         justify-content: space-between;
 88 |         align-items: center;
 89 |         flex-shrink: 0;
 90 |       }
 91 | 
 92 |       .header h1 {
 93 |         color: white;
 94 |         font-size: 1.3rem; /* Adjusted size */
 95 |         font-weight: 600;
 96 |       }
 97 | 
 98 |       .recording-indicator {
 99 |         display: flex;
100 |         align-items: center;
101 |         gap: 8px;
102 |         opacity: 0;
103 |         transition: opacity 0.3s ease;
104 |       }
105 |       .recording-indicator.active { opacity: 1; }
106 | 
107 |       .recording-dot {
108 |         width: 10px; height: 10px;
109 |         background-color: var(--danger-color);
110 |         border-radius: 50%;
111 |         animation: pulse-rec 1.5s infinite;
112 |       }
113 |        @keyframes pulse-rec {
114 |          0% { transform: scale(0.9); box-shadow: 0 0 0 0 rgba(215, 38, 61, 0.7); }
115 |          70% { transform: scale(1); box-shadow: 0 0 0 8px rgba(215, 38, 61, 0); }
116 |          100% { transform: scale(0.9); box-shadow: 0 0 0 0 rgba(215, 38, 61, 0); }
117 |        }
118 | 
119 |       .recording-text {
120 |         color: white;
121 |         font-weight: 500;
122 |         font-size: 0.85rem; /* Slightly smaller */
123 |       }
124 | 
125 |       .main-container {
126 |         display: flex;
127 |         flex-grow: 1;
128 |         overflow: hidden; /* Prevent its own scrollbars */
129 |         /* Height managed by flex-grow */
130 |       }
131 | 
132 |       .chat-area {
133 |         flex: 1 1 40%; /* Takes 40% initially, can grow/shrink */
134 |         min-width: 280px; /* Minimum width before wrapping */
135 |         background-color: var(--light-color);
136 |         display: flex;
137 |         flex-direction: column;
138 |         overflow: hidden;
139 |         border-right: 1px solid var(--border-color);
140 |       }
141 | 
142 |       .video-area {
143 |         flex: 1 1 60%; /* Takes 60% initially */
144 |         min-width: 300px;
145 |         background-color: #f0f2f5;
146 |         display: flex;
147 |         flex-direction: column;
148 |         overflow: hidden;
149 |       }
150 | 
151 |       .messages {
152 |         flex-grow: 1;
153 |         padding: 15px; /* Reduced padding */
154 |         overflow-y: auto; /* Enable scrolling */
155 |         display: flex;
156 |         flex-direction: column;
157 |         gap: 12px; /* Reduced gap */
158 |       }
159 | 
160 |       .message {
161 |         max-width: 85%; /* Slightly wider max */
162 |         padding: 10px 15px;
163 |         border-radius: var(--border-radius-md);
164 |         animation: fadeIn 0.3s ease-in-out;
165 |         word-wrap: break-word;
166 |         font-size: 0.9rem; /* Base message font size */
167 |         line-height: 1.5;
168 |         border: 1px solid transparent;
169 |       }
170 |       @keyframes fadeIn { /* Keep animation */ }
171 | 
172 |       .user-message {
173 |         align-self: flex-end;
174 |         background-color: var(--bg-medium-gray);
175 |         color: var(--text-color);
176 |         border-color: #d1d9e0;
177 |         border-bottom-right-radius: var(--border-radius-sm);
178 |       }
179 | 
180 |       .bot-message {
181 |         align-self: flex-start;
182 |         background-color: var(--primary-color);
183 |         color: white;
184 |         border-color: var(--primary-dark);
185 |         border-bottom-left-radius: var(--border-radius-sm);
186 |         overflow-x: auto; /* For wide tables */
187 |       }
188 | 
189 |       .video-message {
190 |         max-width: 85%; /* Match text message width */
191 |         align-self: flex-end;
192 |         background-color: var(--bg-medium-gray);
193 |         color: var(--text-color);
194 |         padding: 8px;
195 |         border-radius: var(--border-radius-md);
196 |         border-color: #d1d9e0;
197 |         border-bottom-right-radius: var(--border-radius-sm);
198 |         overflow: hidden;
199 |         animation: fadeIn 0.3s ease-in-out;
200 |         border: 1px solid #d1d9e0;
201 |       }
202 |        /* Label inside video message */
203 |       .video-message p {
204 |          font-size: 0.8rem;
205 |          margin-bottom: 5px;
206 |          color: var(--text-light);
207 |       }
208 |       .video-message video {
209 |         width: 100%;
210 |         max-width: 250px; /* Smaller max preview */
211 |         display: block;
212 |         border-radius: var(--border-radius-sm);
213 |         border: 1px solid var(--border-color);
214 |       }
215 | 
216 |       .video-container {
217 |         flex-grow: 1; position: relative; background-color: #000;
218 |         display: flex; align-items: center; justify-content: center;
219 |         min-height: 200px; /* Ensure minimum height */
220 |       }
221 | 
222 |       #videoElement {
223 |         display: block; max-width: 100%; max-height: 100%;
224 |         width: auto; height: auto; object-fit: contain;
225 |       }
226 | 
227 |       .video-controls {
228 |         display: flex; padding: 12px 15px; /* Adjusted padding */
229 |         background-color: var(--light-color);
230 |         border-top: 1px solid var(--border-color);
231 |         justify-content: center; gap: 15px; /* Adjusted gap */
232 |         flex-shrink: 0; flex-wrap: wrap; /* Allow buttons to wrap */
233 |       }
234 | 
235 |       .video-button {
236 |         padding: 8px 20px; /* Adjusted padding */
237 |         background-color: var(--primary-color);
238 |         color: white; border: none;
239 |         border-radius: var(--border-radius-md); cursor: pointer;
240 |         transition: var(--transition); display: flex; align-items: center;
241 |         justify-content: center; gap: 6px; /* Reduced gap */
242 |         font-weight: 500; font-size: 0.9rem; /* Adjusted font size */
243 |       }
244 |       .video-button:hover:not(:disabled) {
245 |         background-color: var(--primary-dark); transform: translateY(-2px);
246 |         box-shadow: 0 3px 8px rgba(0,0,0,0.1);
247 |       }
248 |       .video-button:active:not(:disabled) { transform: translateY(0); }
249 |       .video-button:disabled {
250 |         background-color: var(--bg-medium-gray); color: var(--text-light);
251 |         cursor: not-allowed; transform: none; box-shadow: none;
252 |       }
253 |       .video-button.stop { background-color: var(--danger-color); }
254 |       .video-button.stop:hover:not(:disabled) { background-color: #b02032; }
255 | 
256 |       .button-icon { width: 16px; height: 16px; fill: currentColor; } /* Smaller icon */
257 | 
258 |       .status-message {
259 |         position: absolute; bottom: 10px; /* Closer to bottom */
260 |         left: 50%; transform: translateX(-50%); background-color: rgba(0, 0, 0, 0.75);
261 |         color: white; padding: 6px 12px; /* Smaller padding */
262 |         border-radius: 15px; font-size: 0.85rem; /* Smaller font */
263 |         opacity: 0; transition: opacity 0.3s ease;
264 |         pointer-events: none; z-index: 10;
265 |       }
266 |       .status-message.visible { opacity: 1; }
267 | 
268 |       /* Table Styles inside bot-message */
269 |       .bot-message table {
270 |         width: 100%; border-collapse: collapse; margin: 10px 0; /* Removed top/bottom margins */
271 |         font-size: 0.9em; line-height: 1.4; color: white;
272 |       }
273 |       .bot-message th, .bot-message td {
274 |         border: 1px solid rgba(255, 255, 255, 0.2); padding: 6px 8px; /* Reduced padding */
275 |         text-align: left; vertical-align: top; word-wrap: break-word; white-space: normal;
276 |       }
277 |       .bot-message th {
278 |         background-color: rgba(255, 255, 255, 0.1); font-weight: 600;
279 |         color: var(--secondary-color);
280 |       }
281 |       .bot-message tr:nth-child(even) { background-color: rgba(255, 255, 255, 0.05); }
282 |       .bot-message tr:hover { background-color: rgba(1, 186, 239, 0.1); }
283 | 
284 |       /* Adjust spacing for other raw HTML elements */
285 |        .bot-message p { margin-bottom: 0.7em; color: inherit;} /* Ensure text color */
286 |        .bot-message p:last-of-type { margin-bottom: 0; }
287 |        .bot-message ul, .bot-message ol { margin: 10px 0 10px 20px; padding: 0; color: inherit;}
288 |        .bot-message li { margin-bottom: 5px; }
289 | 
290 |         /* Scrollbar Styles */
291 |         ::-webkit-scrollbar { width: 6px; height: 6px;} /* Adjust height for horizontal */
292 |         ::-webkit-scrollbar-track { background: var(--bg-light-gray); }
293 |         ::-webkit-scrollbar-thumb { background: var(--border-color); border-radius: 3px; }
294 |         ::-webkit-scrollbar-thumb:hover { background: var(--text-light); }
295 | 
296 | 
297 |       /* --- Responsive Design --- */
298 | 
299 |       /* Tablet and Smaller Desktops */
300 |       @media (max-width: 1024px) {
301 |           .container {
302 |               height: calc(100vh - 30px); /* Adjust height slightly */
303 |               max-height: none; /* Allow full height */
304 |           }
305 |           .header h1 { font-size: 1.2rem; }
306 |           .messages { padding: 15px; }
307 |           .message { font-size: 0.9rem; }
308 |           .video-controls { padding: 12px; gap: 15px; }
309 |           .video-button { padding: 8px 20px; font-size: 0.9rem; }
310 |       }
311 | 
312 | 
313 |       /* Mobile Devices */
314 |       @media (max-width: 768px) {
315 |          body { padding: 0; height: 100vh; overflow: hidden; } /* Lock body scroll */
316 |          .app-wrapper { padding: 0; height: 100%; }
317 |          .container {
318 |             width: 100%; height: 100%; max-width: 100%; margin: 0; padding: 0;
319 |             border-radius: 0; border: none; box-shadow: none; max-height: none;
320 |          }
321 |         .main-container {
322 |           flex-direction: column; /* Stack vertically */
323 |         }
324 |         .chat-area, .video-area {
325 |           flex: 1 1 50%; /* Share height equally */
326 |           border-radius: 0; width: 100%;
327 |           border-right: none; /* Remove side border */
328 |         }
329 |         .chat-area {
330 |           border-bottom: 1px solid var(--border-color); /* Separator */
331 |           min-height: 150px; /* Minimum chat height */
332 |         }
333 |         .video-area {
334 |           border-left: none; border-top: none;
335 |           min-height: 200px; /* Minimum video height */
336 |         }
337 |          .messages { padding: 10px; gap: 10px;}
338 |          .message { font-size: 0.85rem; padding: 8px 12px; max-width: 90%;}
339 |          .bot-message table { font-size: 0.8em; }
340 |          .bot-message th, .bot-message td { padding: 5px 7px; }
341 |          .video-controls { padding: 10px; gap: 10px; }
342 |          .video-button { padding: 8px 15px; font-size: 0.85rem; }
343 |          .header h1 { font-size: 1.1rem; }
344 |          .recording-text { font-size: 0.8rem; }
345 |       }
346 | 
347 |         /* Very Small Mobile Devices */
348 |        @media (max-width: 480px) {
349 |            .header { padding: 10px 15px; }
350 |            .header h1 { font-size: 1rem; }
351 |            .messages { padding: 10px; }
352 |            .video-controls { gap: 8px; flex-wrap: nowrap; } /* Prevent wrapping if possible */
353 |            .video-button { padding: 6px 12px; font-size: 0.8rem; }
354 |            .button-icon { width: 14px; height: 14px; }
355 |            .status-message { font-size: 0.8rem; padding: 5px 10px; bottom: 5px;}
356 |        }
357 | 
358 |     </style>
359 |   </head>
360 |   <body>
361 | 
362 | 
363 | 
364 |     
365 |     <!-- Added App Wrapper -->
366 |     <div class="app-wrapper">
367 |         <div class="container">
368 |         <div class="header">
369 |             <h1>Video Analysis</h1>
370 |             <div class="recording-indicator" id="recordingIndicator">
371 |             <div class="recording-dot"></div>
372 |             <span class="recording-text">Recording</span>
373 |             </div>
374 |         </div>
375 |         <div class="main-container">
376 |             <div class="chat-area">
377 |             <div class="messages" id="messages">
378 |                 <!-- Initial bot message added by JS -->
379 |             </div>
380 |             </div>
381 |             <div class="video-area">
382 |             <div class="video-container">
383 |                 <video id="videoElement" autoplay playsinline muted></video>
384 |                 <div class="status-message" id="statusMessage"></div>
385 |             </div>
386 |             <div class="video-controls">
387 |                     <button class="video-button" id="startButton">
388 |                         <svg class="button-icon" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 14.5v-9l6 4.5-6 4.5z"></path></svg>
389 |                         Record
390 |                     </button>
391 |                     <button class="video-button stop" id="stopButton" disabled>
392 |                         <svg class="button-icon" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 14H9V8h2v8zm4 0h-2V8h2v8z"></path></svg>
393 |                         Stop & Analyze
394 |                     </button>
395 |             </div>
396 |             </div>
397 |         </div>
398 |         </div>
399 |     </div>
400 | 
401 |     <script>
402 |       // DOM Elements
403 |       const messagesContainer = document.getElementById("messages");
404 |       const videoElement = document.getElementById("videoElement");
405 |       const startButton = document.getElementById("startButton");
406 |       const stopButton = document.getElementById("stopButton");
407 |       const recordingIndicator = document.getElementById("recordingIndicator");
408 |       const statusMessage = document.getElementById("statusMessage");
409 | 
410 |       // Backend endpoint URL - UPDATE THIS
411 |       const BACKEND_URL = "http://127.0.0.1:8000/video";
412 | 
413 |       // Variables for video recording
414 |       let stream = null;
415 |       let mediaRecorder = null;
416 |       let recordedChunks = [];
417 | 
418 |       // --- Utility Functions ---
419 | 
420 |       function addMessage(contentHtml, isUser) {
421 |         const messageDiv = document.createElement("div");
422 |         messageDiv.classList.add("message");
423 |         messageDiv.classList.add(isUser ? "user-message" : "bot-message");
424 |         messageDiv.innerHTML = contentHtml;
425 |         messagesContainer.appendChild(messageDiv);
426 |         scrollToBottom();
427 |       }
428 | 
429 |       function addVideoMessage(videoBlob) {
430 |         const messageDiv = document.createElement("div");
431 |         messageDiv.classList.add("message", "user-message", "video-message");
432 | 
433 |         const videoEl = document.createElement("video");
434 |         videoEl.controls = true;
435 |         videoEl.src = URL.createObjectURL(videoBlob);
436 | 
437 |         const label = document.createElement('p');
438 |         label.textContent = `Your video submission (${new Date().toLocaleTimeString()}):`;
439 |         // label styling is handled by CSS now
440 | 
441 |         messageDiv.appendChild(label);
442 |         messageDiv.appendChild(videoEl);
443 |         messagesContainer.appendChild(messageDiv);
444 |         scrollToBottom();
445 |       }
446 | 
447 |       function scrollToBottom() {
448 |         // Using requestAnimationFrame for smoother scroll after DOM update
449 |         requestAnimationFrame(() => {
450 |              messagesContainer.scrollTop = messagesContainer.scrollHeight;
451 |         });
452 |       }
453 | 
454 |       function showStatusMessage(text) {
455 |         statusMessage.textContent = text;
456 |         statusMessage.classList.add("visible");
457 |         if (statusMessage._timer) clearTimeout(statusMessage._timer);
458 |         statusMessage._timer = setTimeout(() => {
459 |           statusMessage.classList.remove("visible");
460 |         }, 3000);
461 |       }
462 | 
463 |       // --- Core Functionality ---
464 | 
465 |       async function startVideoRecording() {
466 |         try {
467 |           stream = await navigator.mediaDevices.getUserMedia({ video: true, audio: true });
468 |           videoElement.srcObject = stream;
469 |           videoElement.muted = true;
470 |           videoElement.play().catch(e => console.warn("Autoplay prevented:", e));
471 | 
472 |           // --- MimeType Selection ---
473 |           const supportedTypes = [
474 |              'video/webm; codecs=vp9,opus','video/webm; codecs=vp8,opus',
475 |              'video/webm; codecs=h264,opus','video/mp4; codecs=h264,aac',
476 |              'video/webm','video/mp4',
477 |           ];
478 |           let selectedMimeType = '';
479 |           for (const type of supportedTypes) {
480 |              if (MediaRecorder.isTypeSupported(type)) { selectedMimeType = type; break; }
481 |           }
482 |           if (!selectedMimeType) { throw new Error("No supported mimeType found"); }
483 |           const options = { mimeType: selectedMimeType };
484 |           // --- End MimeType ---
485 | 
486 |           mediaRecorder = new MediaRecorder(stream, options);
487 |           recordedChunks = [];
488 | 
489 |           mediaRecorder.ondataavailable = (event) => {
490 |             if (event.data.size > 0) recordedChunks.push(event.data);
491 |           };
492 | 
493 |           mediaRecorder.onstop = () => {
494 |              if (recordedChunks.length === 0) { console.warn("No video chunks recorded."); return; }
495 |             const videoBlob = new Blob(recordedChunks, { type: mediaRecorder.mimeType });
496 |             addVideoMessage(videoBlob);
497 |             sendVideoToBackend(videoBlob);
498 |             recordedChunks = [];
499 |           };
500 | 
501 |           mediaRecorder.start(1000);
502 |           startButton.disabled = true;
503 |           stopButton.disabled = false;
504 |           recordingIndicator.classList.add("active");
505 |           showStatusMessage("Recording Started");
506 |           addMessage(`<p><i>Recording started...</i></p>`, false);
507 | 
508 |         } catch (err) {
509 |           console.error("Error accessing media devices:", err);
510 |           let userMessage = "Error accessing camera/microphone. Please check permissions.";
511 |            if (err.name === 'NotAllowedError' || err.name === 'PermissionDeniedError') { userMessage = "Permission denied. Please allow access to camera/microphone."; }
512 |            else if (err.name === 'NotFoundError' || err.name === 'DevicesNotFoundError') { userMessage = "No camera or microphone found."; }
513 |            else if (err.name === 'NotReadableError' || err.name === 'TrackStartError') { userMessage = "Could not start camera/microphone. Is it already in use?"; }
514 |            else if (err.name === 'OverconstrainedError' || err.name === 'ConstraintNotSatisfiedError') { userMessage = "Device doesn't support requested settings."; }
515 |           addMessage(`<p style="color: var(--danger-color);"><i class="fas fa-exclamation-triangle"></i> ${userMessage}</p>`, false);
516 |           showStatusMessage("Error starting recording");
517 |           startButton.disabled = false;
518 |           stopButton.disabled = true;
519 |           recordingIndicator.classList.remove("active"); // Ensure indicator is off on error
520 |         }
521 |       }
522 | 
523 |       function stopVideoRecording() {
524 |         let stoppedGracefully = false;
525 |         if (mediaRecorder && mediaRecorder.state === "recording") {
526 |           mediaRecorder.stop();
527 |           stoppedGracefully = true;
528 |         }
529 |         if (stream) {
530 |           stream.getTracks().forEach((track) => track.stop());
531 |           stream = null;
532 |         }
533 |         videoElement.srcObject = null;
534 |         startButton.disabled = false;
535 |         stopButton.disabled = true;
536 |         recordingIndicator.classList.remove("active");
537 |         if (stoppedGracefully) {
538 |              showStatusMessage("Recording Stopped");
539 |              addMessage(`<p><i>Recording stopped. Sending for analysis...</i></p>`, false);
540 |         } else {
541 |              console.warn("Stop called but recorder wasn't active.");
542 |         }
543 |       }
544 | 
545 |       async function sendVideoToBackend(videoBlob) {
546 |         showStatusMessage("Sending for Analysis...");
547 | 
548 |         const formData = new FormData();
549 |         const mimeType = videoBlob.type || 'video/webm';
550 |         const fileExtension = mimeType.split('/')[1]?.split(';')[0] || 'webm';
551 |         const filename = `recording_${Date.now()}.${fileExtension}`;
552 |         formData.append("title", "Video Analysis Request");
553 |         formData.append("video", videoBlob, filename);
554 | 
555 |         const placeholderMessage = document.createElement("div");
556 |         placeholderMessage.classList.add("message", "bot-message");
557 |         placeholderMessage.innerHTML = `<p><i><i class="fas fa-spinner fa-spin"></i> Analyzing video... please wait.</i></p>`;
558 |         messagesContainer.appendChild(placeholderMessage);
559 |         scrollToBottom();
560 | 
561 |         try {
562 |           const response = await fetch(BACKEND_URL, { method: "POST", body: formData });
563 |           const responseHtml = await response.text();
564 | 
565 |           if (!response.ok) {
566 |              console.error("Backend Error:", response.status, responseHtml);
567 |              placeholderMessage.innerHTML = `<p style="color: var(--danger-color);"><i class="fas fa-exclamation-triangle"></i> Analysis Error (Status ${response.status}).</p><p style="font-size: 0.8em; color: #ffcfcf;">${responseHtml.substring(0, 150)}...</p>`;
568 |              showStatusMessage("Analysis Failed");
569 |           } else {
570 |              if (!responseHtml || !responseHtml.trim()) {
571 |                  placeholderMessage.innerHTML = "<p>Analysis complete, but no specific details were returned by the server.</p>";
572 |                  console.warn("Received empty but successful response.");
573 |              } else {
574 |                  placeholderMessage.innerHTML = responseHtml;
575 |              }
576 |              showStatusMessage("Analysis Complete");
577 |           }
578 |           scrollToBottom();
579 |         } catch (error) {
580 |           console.error("Network/Fetch Error:", error);
581 |           placeholderMessage.innerHTML = `<p style="color: var(--danger-color);"><i class="fas fa-wifi"></i> Network Error: Could not reach analysis server.</p>`;
582 |           showStatusMessage("Network Error");
583 |           scrollToBottom();
584 |         }
585 |       }
586 | 
587 |       // --- Initial Setup ---
588 |       function initializeApp() {
589 |            startButton.disabled = false;
590 |            stopButton.disabled = true;
591 |            addMessage(
592 |                `<p><i class="fas fa-info-circle"></i> Welcome! Click 'Record Video' to start. Show or describe your symptoms clearly. Click 'Stop & Analyze' when done.</p>`,
593 |                false // Add as a bot message
594 |            );
595 |        }
596 | 
597 |       // --- Event Listeners ---
598 |       startButton.addEventListener("click", startVideoRecording);
599 |       stopButton.addEventListener("click", stopVideoRecording);
600 | 
601 |       // --- Run Initialization ---
602 |       initializeApp();
603 | 
604 |     </script>
605 |   </body>
606 | </html>


--------------------------------------------------------------------------------
/Frontend/index.html:
--------------------------------------------------------------------------------
  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 |     <link rel="shortcut icon" href="Favi.png" type="image/x-icon">
  7 |     <title>DiagnoAI</title>  
  8 |     <script src="Footer.js"></script>
  9 |    <link rel="stylesheet" href="Main.css">
 10 |     <link rel="stylesheet" href="Feature.css">
 11 |     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
 12 |     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
 13 |     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
 14 |     <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
 15 |     <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.1/SplitText.min.js"></script>
 16 |     <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.1/ScrollTrigger.min.js"></script>
 17 |     <link href="https://fonts.cdnfonts.com/css/druk" rel="stylesheet">
 18 | 
 19 |     <style>
 20 |         @import url('https://fonts.cdnfonts.com/css/brigends-expanded');
 21 |         @import url(https://db.onlinewebfonts.com/c/57b4f5e63d8291afbed1091f97645d52?family=Phonk+Regular+DEMO);
 22 |         
 23 |         /* General Styles */
 24 |         body {
 25 |             background-color:#f8f9fa;
 26 |             color:  #3094bf;
 27 |             margin: 0;
 28 |             font-family: 'Druk', sans-serif;
 29 |             min-height: 100vh;
 30 |             overflow-x: hidden;
 31 |             display: flex;
 32 |             flex-direction: column;
 33 |         }
 34 |         
 35 | 
 36 |         /* Navigation */
 37 |         .navbar {
 38 |             position: fixed;
 39 |             top: 0;
 40 |             left: 0;
 41 |          
 42 |             width: 100%;
 43 |             z-index: 1000;
 44 |         }
 45 | 
 46 |         /* Main Content */
 47 |         .main-content {
 48 |             flex: 1;
 49 |             position: relative;
 50 |             margin-top: 56px; /* Height of navbar */
 51 |         }
 52 | 
 53 |         /* Hero Section */
 54 |         .hero {
 55 |             height: 100vh;
 56 |             width: 100%;
 57 |             text-align: center;
 58 |             position: relative;
 59 |             display: flex;
 60 |             flex-direction: column;
 61 |             justify-content: center;
 62 |         }
 63 | 
 64 |         .hero-text {
 65 |             font-weight: bold;
 66 |             font-size: 6.5rem;
 67 |             color:  #3094bf;;
 68 |             line-height: 1;
 69 |             font-family: 'Phonk Regular DEMO';
 70 |             position: absolute;
 71 |             z-index: 2;
 72 |             transition: all 0.3s ease-in-out;
 73 |             pointer-events: none;
 74 |             width: 100%;
 75 |             text-align: center;
 76 |             opacity: 0;
 77 |             transform: translateY(-50px);
 78 |             animation: fadeInUp 1s ease-out forwards;
 79 |             overflow: hidden;
 80 |         }
 81 | 
 82 |         @keyframes fadeInUp {
 83 |             0% {
 84 |                 opacity: 0;
 85 |                 transform: translateY(100px);
 86 |             }
 87 |             100% {
 88 |                 opacity: 1;
 89 |                 transform: translateY(0);
 90 |             }
 91 |         }
 92 | 
 93 |         #heroText {
 94 |             width: 60%;
 95 |             margin-left: 20%;
 96 |             padding-top: 3%;
 97 |         }
 98 | 
 99 |         .hero-img {
100 |             width: 20%;
101 |             height: 30%;
102 |             opacity: 0;
103 |             transform: scale(0);
104 |             transition: opacity 1s ease-out, transform 1s ease-out;
105 |             
106 |         }
107 | 
108 |         .hero-img.visible {
109 |             opacity: 1;
110 |             transform: scale(1);
111 |         }
112 |         .hero-img img {
113 |   border-radius: 20px; /* Adjust this value for desired roundness */
114 | }
115 |         /* Image Positioning */
116 |         .container {
117 |             display: grid;
118 |             grid-template-columns: repeat(1fr);
119 |             grid-template-rows: repeat(1fr);
120 |             gap: 20px;
121 |             width: 100%;
122 |             height: 100%;
123 |        
124 |             position: relative;
125 |         }
126 | 
127 |         .img1, .img2, .img3, .img4 {
128 |             position: absolute;
129 |             
130 |         }
131 | 
132 |         .img1 {
133 |             top: 10%;
134 |             left: 10%;
135 |         
136 |         }
137 | 
138 |         .img2 {
139 |             top: 10%;
140 |             right: 10%;
141 |         }
142 | 
143 |         .img3 {
144 |             bottom: 10%;
145 |             left: 10%;
146 |         }
147 | 
148 |         .img4 {
149 |             bottom: 10%;
150 |             right: 10%;
151 |         }
152 | 
153 |         #hero-img1, #hero-img2, #hero-img3, #hero-img4 {
154 |             width: 100%;
155 |             height: 100%;
156 |             object-fit: cover;
157 |         }
158 | 
159 |         .text-outline {
160 |             color: transparent;
161 |             -webkit-text-stroke: 2px #4f4f4f;
162 |             font-weight: 200;
163 |         }
164 | 
165 |         h1 {
166 |             font-size: 2.5rem;
167 |             line-height: 1;
168 |             text-align: left;
169 |             font-family: 'Phonk Regular DEMO';
170 |         }
171 | 
172 |         h4 {
173 |             line-height: 1;
174 |             width: 200%;
175 |             font-size: 1rem;
176 |             text-align: left;
177 |         }
178 | 
179 |         .title {
180 |           font-weight: bold;
181 |             font-size: 1.5rem;
182 |         }
183 | 
184 |         .olive {
185 |             width: 200%;
186 |         }
187 |        
188 | 
189 |         .hidden-text {
190 |             opacity: 0;
191 |         }
192 | 
193 |         .image-wrapper {
194 |             position: relative;
195 |             overflow: hidden;
196 |             transition: 0.3s;
197 |         }
198 | 
199 |         .image {
200 |             display: block;
201 |             transition: 0.3s;
202 |         }
203 | 
204 |         .outline {
205 |             position: absolute;
206 |             top: 0;
207 |             left: 0;
208 |             width: 100%;
209 |             height: 100%;
210 |             border: 2px solid transparent;
211 |             pointer-events: none;
212 |             transition: 0.3s;
213 |         }
214 | 
215 |         .diagonal {
216 |             position: absolute;
217 |             width: 141%;
218 |             height: 2px;
219 |             background: transparent;
220 |             top: 50%;
221 |             left: -20%;
222 |             transform-origin: center;
223 |             transition: 0.3s;
224 |             color: #4f4f4f;
225 |             border: 1px solid transparent;
226 |         }
227 | 
228 |         .diagonal:first-child {
229 |             transform: rotate(45deg);
230 |         }
231 | 
232 |         .diagonal:last-child {
233 |             transform: rotate(-45deg);
234 |         }
235 | 
236 |         /* Footer Styles */
237 |         .footer {
238 |             background-color: #343a40;
239 |             padding: 60px 0;
240 |             position: relative;
241 |             z-index: 10;
242 |         }
243 | 
244 |         .footer-container {
245 |             max-width: 1200px;
246 |             margin: 0 auto;
247 |             padding: 0 40px;
248 |             display: flex;
249 |             flex-direction: column;
250 |             align-items: center;
251 |         }
252 | 
253 |         .footer-brand {
254 |             margin-bottom: 30px;
255 |             text-align: center;
256 |         }
257 | 
258 |         .footer-title {
259 |             font-size: 2rem;
260 |             font-family: 'Phonk Regular DEMO';
261 |             margin-bottom: 15px;
262 |         }
263 | 
264 |         .footer-tagline {
265 |             color: #aaa;
266 |             max-width: 500px;
267 |             margin: 0 auto;
268 |         }
269 | 
270 |         .footer-nav {
271 |             display: flex;
272 |             justify-content: center;
273 |             gap: 40px;
274 |             flex-wrap: wrap;
275 |             margin-bottom: 30px;
276 |         }
277 | 
278 |         .footer-nav .nav-item {
279 |             list-style: none;
280 |         }
281 | 
282 |         .footer-nav .nav-link {
283 |             color: white;
284 |             text-decoration: none;
285 |             font-size: 1rem;
286 |             transition: color 0.3s ease;
287 |             position: relative;
288 |         }
289 | 
290 |         .footer-nav .nav-link::after {
291 |             content: '';
292 |             position: absolute;
293 |             bottom: -5px;
294 |             left: 0;
295 |             width: 0;
296 |             height: 1px;
297 |             background-color:  #212121;
298 |             transition: width 0.3s ease;
299 |         }
300 | 
301 |         .footer-nav .nav-link:hover {
302 |             color: #4f4f4f;
303 |         }
304 | 
305 |         .footer-nav .nav-link:hover::after {
306 |             width: 100%;
307 |         }
308 | 
309 |         .footer-social {
310 |             display: flex;
311 |             gap: 20px;
312 |             margin-bottom: 30px;
313 |         }
314 | 
315 |         .social-icon {
316 |             color: white;
317 |             font-size: 1.2rem;
318 |             transition: all 0.3s ease;
319 |         }
320 | 
321 |         .social-icon:hover {
322 |             color: #4f4f4f;
323 |             transform: translateY(-3px);
324 |         }
325 | 
326 |         .copyright {
327 |             color: #777;
328 |             font-size: 0.9rem;
329 |         }
330 | 
331 |         /* Tablet Devices (768px - 1024px) */
332 |         @media (max-width: 1024px) {
333 |             .hero-text {
334 |                 font-size: 4.5rem;
335 |             }
336 | 
337 |             h1 {
338 |                 font-size: 2rem;
339 |             }
340 | 
341 |             h4 {
342 |                 font-size: 0.9rem;
343 |             }
344 |             
345 |             .footer-nav {
346 |                 gap: 30px;
347 |             }
348 |             .navbar-nav {
349 |                 background-color: whitesmoke;
350 |                 align-items: center;
351 |                 color: #3498db;
352 |             }
353 |         }
354 | 
355 |         /* Mobile Devices (up to 767px) */
356 |         @media (max-width: 767px) {
357 |             .hero-text {
358 |                 font-size: 2.5rem;
359 |             }
360 | 
361 |             h1 {
362 |                 font-size: 1.5rem;
363 |             }
364 | 
365 |             h4 {
366 |                 font-size: 0.8rem;
367 |                 width: 100%;
368 |             }
369 | 
370 |             .hero-img {
371 |                 width: 40%;
372 |             }
373 |             
374 |             .navbar-nav {
375 |                 background-color: whitesmoke;
376 |                 align-items: center;
377 | 
378 |             }
379 |             
380 |             #heroText {
381 |                 width: 90%;
382 |                 margin-left: 5%;
383 |                 padding-top: 10%;
384 |             }
385 | 
386 |             .container {
387 |                 grid-template-columns: 1fr;
388 |      
389 |                 
390 |             }
391 | 
392 |             .img1, .img2, .img3, .img4 {
393 |                 position: static;
394 |                 margin: 10px auto;
395 |              
396 |             }
397 |             
398 |             .footer-nav {
399 |                 flex-direction: column;
400 |                 align-items: center;
401 |                 gap: 20px;
402 |             }
403 |             
404 |             .footer-title {
405 |                 font-size: 1.5rem;
406 |             }
407 |             .social-icons{
408 |                 display: flex
409 | ;
410 |             }
411 |         }
412 | 
413 | 
414 | 
415 | 
416 | 
417 |         .content {
418 |     flex: 1;
419 |     padding: 20px;
420 | }
421 | 
422 | .footer {
423 |     background-color: #343a40;
424 |     color: #fff;
425 |     padding: 40px 0;
426 | }
427 | 
428 | .footer-container {
429 |     max-width: 1200px;
430 |     margin: 0 auto;
431 |     padding: 0 20px;
432 | }
433 | 
434 | .footer-content {
435 |     display: flex;
436 |     flex-wrap: wrap;
437 |     justify-content: space-between;
438 |     gap: 30px;
439 | }
440 | 
441 | 
442 | 
443 | 
444 | 
445 | 
446 | .footer-logo {
447 |     flex: 1;
448 |     min-width: 250px;
449 | }
450 | 
451 | .footer-logo h2 {
452 |     font-size: 28px;
453 |     margin-bottom: 15px;
454 |     color: #fff;
455 | }
456 | 
457 | 
458 | 
459 | .footer-logo p {
460 |     color: #ccc;
461 |     line-height: 1.6;
462 | }
463 | 
464 | .footer-links {
465 |     flex: 1;
466 |     min-width: 250px;
467 | }
468 | 
469 | .footer-links h3 {
470 |     font-size: 18px;
471 |     margin-bottom: 20px;
472 | 
473 |     position: relative;
474 | }
475 | 
476 | 
477 | 
478 | 
479 | 
480 | 
481 | 
482 | 
483 | 
484 | 
485 | .footer-links ul {
486 |     list-style: none;
487 | }
488 | 
489 | .footer-links ul li {
490 |     margin-bottom: 12px;
491 | }
492 | 
493 | .footer-links ul li a {
494 |     color: #fff;
495 |     text-decoration: none;
496 |     transition: all 0.3s ease;
497 | }
498 | 
499 | .footer-links ul li a:hover {
500 |     color: #3498db;
501 |     padding-left: 5px;
502 | }
503 | 
504 | .footer-social {
505 |     flex: 1;
506 |     min-width: 250px;
507 | }
508 | 
509 | .footer-social h3 {
510 |     font-size: 18px;
511 |  
512 | 
513 |     position: relative;
514 | }
515 | 
516 | 
517 | 
518 | 
519 | 
520 | 
521 | 
522 | 
523 | 
524 | 
525 | 
526 | 
527 | 
528 | 
529 | .social-icons {
530 |     gap: 9px;
531 |     margin-top: 20px;
532 | }
533 | 
534 | .social-icons a {
535 |     display: flex;
536 |     align-items: center;
537 |     justify-content: center;
538 |     width: 40px;
539 |     height: 40px;
540 |     border-radius: 50%;
541 |     background-color: #222;
542 |     color: #fff;
543 |     text-decoration: none;
544 |     transition: all 0.3s ease;
545 | }
546 | 
547 | .social-icons a:hover {
548 |     background-color: #3498db;
549 |     transform: translateY(-5px);
550 | }
551 | 
552 | .footer-bottom {
553 |     margin-top: 30px;
554 |     padding-top: 20px;
555 |     border-top: 1px solid #222;
556 |     text-align: center;
557 | }
558 | 
559 | .footer-bottom p {
560 |     color: #ccc;
561 | }
562 | 
563 | .footer-bottom p a {
564 |     color: #3498db;
565 |     text-decoration: none;
566 | }
567 | 
568 | @media (max-width: 768px) {
569 |     .footer-content {
570 |         flex-direction: column;
571 |     }
572 |    
573 |     .footer-logo, .footer-links, .footer-social {
574 |         width: 100%;
575 |     }
576 | }
577 | 
578 | 
579 | 
580 | 
581 | 
582 | 
583 | 
584 |         
585 |     </style>
586 | </head>
587 | <body>
588 |     <nav class="navbar navbar-expand-lg navbar-dark fixed-top">
589 |         <div class="container-fluid">
590 |             <a class="navbar-brand title me-auto" href="index.html" style="color: #0b4f6c;"> DiagnoAI</a> 
591 |             <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" 
592 |                 aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
593 |                 <span class="navbar-toggler-icon"></span>
594 |             </button>
595 |             <div class="collapse navbar-collapse justify-content-end" id="navbarNav">
596 |                 <ul class="navbar-nav" >
597 |                     <li class="nav-item mx-4" ><a class="nav-link" style="color: #212529;" href="Vision.html">Wealth analysis</a></li>
598 |                     <li class="nav-item mx-4"><a class="nav-link" style="color: #212529;" href="FrontSYM.html">FrontSymptoms</a></li>
599 |                     <li class="nav-item mx-4"><a class="nav-link" style="color:#212529;" href="BackSYM.html">BackSymptoms</a></li>
600 |                     <li class="nav-item mx-4"><a class="nav-link" style="color: #212529;" href="verify-trxn.html">Verify Txn</a></li>
601 |                     <li class="nav-item mx-4"><a class="nav-link" style="color: #212529;" href="interactions.html">Download your data</a></li>
602 | 
603 |              
604 |                 </ul>
605 |             </div>
606 |         </div>
607 |     </nav>
608 |     
609 |     <div class="main-content">
610 |         <div class="hero">
611 |             <div class="hero-text" id="heroText">
612 |                 DiagnoAI
613 |                
614 |             </div>   
615 |            
616 |             <div class="container">
617 |                 <div id="img1" class="hero-img img1">
618 |                     <div class="image-wrapper">
619 |                         <img id="hero-img1" src="img1.png" class="image" alt="Image 1">
620 |                         <div class="outline">
621 |                             <div class="diagonal"></div>
622 |                             <div class="diagonal"></div>
623 |                         </div>
624 |                     </div>
625 |                     <div id="text1" class="hidden-text">
626 |                         <h1>Customized Diet Plan<h1>
627 |                         <h4>Eat Right for Your Health</h4>
628 |                     </div>
629 |                 </div>
630 |                 <div id="img2" class="hero-img img2">
631 |                     <div class="image-wrapper">
632 |                         <img id="hero-img2" src="img2.png" class="image" alt="Image 2">
633 |                         <div class="outline">
634 |                             <div class="diagonal"></div>
635 |                             <div class="diagonal"></div>
636 |                         </div>
637 |                     </div>
638 |                     <div id="text2" class="hidden-text">
639 |                         <h1>Personalized Wellness</h1>
640 |                         <h4>Fitness & Nutrition Model</h4>
641 |                     </div>
642 |                 </div>
643 |                 <div id="img3" class="hero-img img3">
644 |                     <div class="image-wrapper">
645 |                         <img id="hero-img3" src="img3.jpg" class="image" alt="Image 3">
646 |                         <div class="outline">
647 |                             <div class="diagonal"></div>
648 |                             <div class="diagonal"></div>
649 |                         </div>
650 |                     </div>
651 |                     <div id="text3" class="hidden-text">
652 |                         <h1>Interactive Body Map</h1>
653 |                         <h4>Front & Back Symptom Checker</h4>
654 |                     </div>
655 |                 </div>
656 |                 <div id="img4" class="hero-img img4">
657 |                     <div class="image-wrapper">
658 |                         <img id="hero-img4" src="img4.png" class="image" alt="Image 4">
659 |                         <div class="outline">
660 |                             <div class="diagonal"></div>
661 |                             <div class="diagonal"></div>
662 |                         </div>
663 |                     </div>
664 |                     <div id="text4" class="hidden-text">
665 |                         <h1 class="olive">Natural Language Diagnostics</h1>
666 |                         <h4>Interactive Installation/ Real Time</h4>
667 |                     </div>
668 |                 </div>
669 |             </div>
670 |             
671 |             
672 |         </div>
673 |        
674 |         </div>
675 |       
676 |         <section id="vision" class="vision">
677 |             <div class="container">
678 |               <div class="section-header dark">
679 |                 <!-- Added .druk-font class -->
680 |                 <h2 class="druk-font" style="color: #3094bf;">Our Services</h2>
681 |              
682 |               </div>
683 |               <div class="vision-grid">
684 |                 <div class="vision-item">
685 |                   <div class="vision-icon">
686 |                     <a href="FrontSYM.html">
687 |                     <i class="fas fa-map-marked-alt"></i>
688 |                 </a>
689 |                 
690 |                 </div>
691 |                   <h3>Interactive Body Map</h3>
692 |                   <p>
693 |                     Instantly address health concerns through an intuitive body map.
694 |                     Click specific parts for insights into potential diseases,
695 |                     symptoms, and solutions.
696 |                   </p>
697 |                 </div>
698 |                 <div class="vision-item">
699 |                   <div class="vision-icon">
700 |                     <a href="NewImageText.html">
701 |                     <i class="fas fa-utensils"></i>
702 |                 </a>
703 |                 </div>
704 |                   <h3>Personalized Wellnes</h3>
705 |                   <p>
706 |                     Receive personalized nutrition and fitness plans tailored to
707 |                     specific medical conditions, helping you manage your health
708 |                     proactively.
709 |                   </p>
710 |                 </div>
711 |                 <div class="vision-item">
712 |                   <div class="vision-icon">
713 |                     
714 |                     <a href="NewTextVoice.html">
715 |                     <i class="fas fa-x-ray"></i>
716 |                 </a>
717 |                 
718 |                 </div>
719 |                   <h3>AI Image Analysis</h3>
720 |                   <p>
721 |                     Upload X-rays, MRIs, or other scans for AI-powered analysis.
722 |                     Receive instant insights highlighting potential areas of concern.
723 |                   
724 |                   </p>
725 |                 </div>
726 |                 <div class="vision-item">
727 |                   <div class="vision-icon">
728 |                     <a href="in.html">
729 |                     <i class="fas fa-video"></i>
730 |                 </a>
731 |                 </div>
732 |                   <h3>Video Analysis</h3>
733 |                   <p>
734 |                     Engage with our AI assistant through video messaging for a more
735 |                     dynamic and potentially visual symptom reporting experience.
736 |                   </p>
737 |                 </div>
738 |               </div>
739 |               <br>   <br>   <br>   <br>   <br>   
740 |             </div> 
741 | 
742 |        
743 |   
744 | 
745 |   
746 |         <footer class="footer">
747 |             <div class="footer-container">
748 |                 <div class="footer-content">
749 |                     <div class="footer-logo">
750 |                         <h2><span>DiagnoAI</span></h2>
751 |                         <p>Providing preliminary health insights based on symptoms. Always consult a healthcare professional for diagnosis.</p>
752 |                     </div>
753 |     
754 |                     <div class="footer-links">
755 |                         <h3>Quick Links</h3>
756 |                         <ul>
757 |                             <li><a href="Vision.html">Our Services</a></li>
758 |                             <li><a href="FrontSYM.html">Front Symptoms</a></li>
759 |                             <li><a href="BackSYM.html">Back Symptoms</a></li>
760 |                             <li ><a href="verify-trxn.html">Verify Txn</a></li>
761 |                         </ul>
762 |                     </div>
763 |     
764 |                     <div class="footer-social">
765 |                         <h3>Connect With Us</h3>
766 |                         <p style="margin-top: 17px;">Stay updated through our channels.</p>
767 |                         <div class="social-icons">
768 |                             <a href="#" class="social-icon" title="Twitter"><i class="fab fa-twitter"></i></a>
769 |                             <a href="#" class="social-icon" title="Instagram"><i class="fab fa-instagram"></i></a>
770 |                             <a href="#" class="social-icon" title="LinkedIn"><i class="fab fa-linkedin-in"></i></a>
771 |                             <a href="#" class="social-icon" title="YouTube"><i class="fab fa-youtube"></i></a>
772 |                         </div>
773 |                     </div>
774 |                 </div>
775 |     
776 |                 <div class="footer-bottom">
777 |                     <p>© 2024 <a href="#">DiagnoAI</a>. All Rights Reserved. <span style="display: block; font-size: 0.8em; margin-top: 5px;">Disclaimer: This tool is for informational purposes only and does not constitute medical advice.</span></p>
778 |                 </div>
779 |             </div>
780 |         </footer>
781 | 
782 | 
783 |    
784 |        
785 | 
786 | 
787 | 
788 | 
789 | 
790 | 
791 | 
792 | 
793 |     
794 | 
795 | 
796 | 
797 |     <script>
798 |         window.onload = () => {
799 |             const images = document.querySelectorAll(".hero-img");
800 |             setTimeout(() => {
801 |                 images.forEach((img) => {
802 |                     img.classList.add("visible");
803 |                 });
804 |             }, 100); 
805 |         };
806 |         
807 |         const images = document.querySelectorAll(".hero-img");
808 |         const heroText = document.getElementById("heroText");
809 |         
810 |         images.forEach((img) => {
811 |             img.addEventListener("mouseenter", () => {
812 |                 heroText.classList.add("text-outline");
813 |                 gsap.to(heroText, { zIndex: 0, duration: 0.3 });
814 |                 gsap.to(img.querySelector(".hidden-text"), { opacity: 1});
815 |                 
816 |                 images.forEach((otherImg) => {
817 |                     if (otherImg !== img) {
818 |                         gsap.to(otherImg.querySelector(".image"), { opacity: 0, duration: 0.3 });
819 |                         gsap.to(otherImg.querySelector(".outline"), { borderColor: "#4f4f4f", duration: 0.3 });
820 |                         gsap.to(otherImg.querySelectorAll(".diagonal"), { background: "#4f4f4f", duration: 0.3 });
821 |                         heroText.classList.add("text-outline");
822 |                         gsap.to(heroText, { zIndex: 0, duration: 0.3 });
823 |                         gsap.to(otherImg.querySelector(".hidden-text"), { opacity: 0, duration: 0.1});
824 |                     }
825 |                 });
826 |             });
827 | 
828 |             img.addEventListener("mouseleave", () => {
829 |                 images.forEach((otherImg) => {
830 |                     gsap.to(otherImg.querySelector(".image"), { opacity: 1, duration: 0.3 });
831 |                     gsap.to(otherImg.querySelector(".outline"), { borderColor: "rgba(255, 255, 255, 0)", duration: 0.3 });
832 |                     gsap.to(otherImg.querySelectorAll(".diagonal"), { background: "rgba(255, 255, 255, 0)", duration: 0.3 });
833 |                     heroText.classList.remove("text-outline");
834 |                     gsap.to(heroText, { zIndex: 2, duration: 0.3 });
835 |                     gsap.to(".hidden-text", { opacity: 0});
836 |                 });
837 |             });
838 | 
839 |             img.addEventListener("mousemove", (e) => {
840 |                 const { left, top, width, height } = img.getBoundingClientRect();
841 |                 const x = (e.clientX - (left + width / 2)) / width * 480;
842 |                 const y = (e.clientY - (top + height / 2)) / height * 480;
843 | 
844 |                 gsap.to(img, {
845 |                     x: x,
846 |                     y: y,
847 |                     duration: 0.3,
848 |                     ease: "power2.out"
849 |                 });
850 |             });
851 | 
852 |             img.addEventListener("mouseleave", () => {
853 |                 gsap.to(img, { x: 0, y: 0, duration: 0.5, ease: "power2.out" });
854 |             });
855 |         });
856 |         // newwwwwwwwwwwwwwwwwwwwwwww
857 |         function toggleChat() {
858 |             const chatContainer = document.getElementById('chatContainer');
859 |             chatContainer.style.display = chatContainer.style.display === 'none' ? 'block' : 'none';
860 |         }
861 | 
862 |         function sendMessage() {
863 |             const userInput = document.getElementById('userInput');
864 |             const message = userInput.value.trim();
865 |             
866 |             if (message) {
867 |                 // Add user message
868 |                 addMessage(message, 'user');
869 |                 
870 |                 // Simulate bot response
871 |                 setTimeout(() => {
872 |                     addMessage('This is a simulated response.', 'bot');
873 |                 }, 1000);
874 |                 
875 |                 // Clear input
876 |                 userInput.value = '';
877 |             }
878 |         }
879 | 
880 |         function addMessage(text, sender) {
881 |             const chatMessages = document.getElementById('chatMessages');
882 |             const messageDiv = document.createElement('div');
883 |             messageDiv.className = `message ${sender}-message`;
884 |             messageDiv.textContent = text;
885 |             chatMessages.appendChild(messageDiv);
886 |             
887 |             // Scroll to bottom
888 |             chatMessages.parentElement.scrollTop = chatMessages.parentElement.scrollHeight;
889 |         }
890 | 
891 |         // Handle Enter key
892 |         document.getElementById('userInput').addEventListener('keypress', function(e) {
893 |             if (e.key === 'Enter') {
894 |                 sendMessage();
895 |             }
896 |         });
897 | 
898 | 
899 | 
900 |         
901 |     </script>
902 | </body>
903 | </html>
904 | 
905 | 
906 | 


--------------------------------------------------------------------------------
/Frontend/interactions.html:
--------------------------------------------------------------------------------
  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>PDF Upload & Response Display</title>
  7 | 
  8 |     <!-- CSS -->
  9 |     <style>
 10 |       /* Base styles and variables */
 11 |       :root {
 12 |         --primary-color: #3094bf;
 13 |         --primary-hover: #2c80a4;
 14 |         --primary-light: rgba(67, 97, 238, 0.1);
 15 |         --primary-lighter: rgba(67, 97, 238, 0.05);
 16 |         --success-color: #2ecc71;
 17 |         --success-bg: rgba(46, 204, 113, 0.1);
 18 |         --error-color: #2ecc71;
 19 |         --error-bg: rgba(46, 204, 113, 0.1);
 20 |         --bg-color: #f8f9fa;
 21 |         --card-bg: #ffffff;
 22 |         --text-color: #333333;
 23 |         --text-secondary: #666666;
 24 |         --border-radius: 12px;
 25 |         --border-radius-sm: 8px;
 26 |         --box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
 27 |         --box-shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.08);
 28 |         --transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
 29 |         --transition-bounce: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
 30 |       }
 31 | 
 32 |       /* Global styles */
 33 |       * {
 34 |         margin: 0;
 35 |         padding: 0;
 36 |         box-sizing: border-box;
 37 |       }
 38 | 
 39 |       body {
 40 |         font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
 41 |         background-color: var(--bg-color);
 42 |         color: var(--text-color);
 43 |         line-height: 1.6;
 44 |         min-height: 100vh;
 45 |         display: flex;
 46 |         flex-direction: column;
 47 |         align-items: center;
 48 |         justify-content: center;
 49 |         padding: 2rem 1rem;
 50 |       }
 51 | 
 52 |       .container {
 53 |         width: 100%;
 54 |         max-width: 800px;
 55 |         margin: 0 auto;
 56 |         text-align: center;
 57 |         animation: fadeIn 0.8s ease-in-out;
 58 |       }
 59 | 
 60 |       h2 {
 61 |         margin-bottom: 1.5rem;
 62 |         font-size: 2rem;
 63 |         color: var(--text-color);
 64 |         position: relative;
 65 |         display: inline-block;
 66 |       }
 67 | 
 68 |       h2::after {
 69 |         content: "";
 70 |         position: absolute;
 71 |         bottom: -8px;
 72 |         left: 50%;
 73 |         transform: translateX(-50%);
 74 |         width: 60px;
 75 |         height: 4px;
 76 |         background: linear-gradient(
 77 |           90deg,
 78 |           var(--primary-color),
 79 |           var(--primary-hover)
 80 |         );
 81 |         border-radius: 2px;
 82 |       }
 83 | 
 84 |       h3 {
 85 |         margin-bottom: 1.5rem;
 86 |         font-size: 1.5rem;
 87 |         color: var(--text-color);
 88 |         position: relative;
 89 |         display: inline-block;
 90 |       }
 91 | 
 92 |       /* Button styles */
 93 |       button {
 94 |         padding: 12px 28px;
 95 |         font-size: 1rem;
 96 |         font-weight: 600;
 97 |         background-color: var(--primary-color);
 98 |         color: white;
 99 |         border: none;
100 |         border-radius: var(--border-radius);
101 |         cursor: pointer;
102 |         transition: var(--transition);
103 |         box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
104 |       }
105 | 
106 |       button:disabled {
107 |         background-color: #a0a0a0;
108 |         cursor: not-allowed;
109 |         transform: none;
110 |         box-shadow: none;
111 |       }
112 | 
113 |       button:hover:not(:disabled) {
114 |         background-color: var(--primary-hover);
115 |         transform: translateY(-2px);
116 |         box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
117 |       }
118 | 
119 |       button:active:not(:disabled) {
120 |         transform: translateY(0);
121 |       }
122 | 
123 |       /* Loading indicator */
124 |       #uploadLoadingElement {
125 |         margin-top: 1.5rem;
126 |         font-style: italic;
127 |         color: #666;
128 |         display: flex;
129 |         align-items: center;
130 |         justify-content: center;
131 |         gap: 10px;
132 |       }
133 | 
134 |       .loading-spinner {
135 |         width: 20px;
136 |         height: 20px;
137 |         border: 3px solid rgba(67, 97, 238, 0.3);
138 |         border-radius: 50%;
139 |         border-top-color: var(--primary-color);
140 |         animation: spin 1s linear infinite;
141 |         display: inline-block;
142 |       }
143 | 
144 |       /* Response area */
145 |       #backendResponseArea {
146 |         margin-top: 2.5rem;
147 |         padding: 0;
148 |         background: transparent;
149 |         border-radius: var(--border-radius);
150 |         width: 100%;
151 |         text-align: left;
152 |         opacity: 0;
153 |         transform: translateY(20px);
154 |         transition: var(--transition);
155 |       }
156 | 
157 |       #backendResponseArea.visible {
158 |         opacity: 1;
159 |         transform: translateY(0);
160 |       }
161 | 
162 |       .response-header {
163 |         display: flex;
164 |         align-items: center;
165 |         justify-content: space-between;
166 |         margin-bottom: 1.5rem;
167 |         padding-bottom: 0.5rem;
168 |         border-bottom: 1px solid rgba(0, 0, 0, 0.05);
169 |       }
170 | 
171 |       .response-header h3 {
172 |         margin-bottom: 0;
173 |       }
174 | 
175 |       .response-timestamp {
176 |         font-size: 0.85rem;
177 |         color: var(--text-secondary);
178 |         font-style: italic;
179 |       }
180 | 
181 |       /* New card-based response content */
182 |       #backendResponseContent {
183 |         display: grid;
184 |         gap: 1.2rem;
185 |       }
186 | 
187 |       .response-card {
188 |         background: var(--card-bg);
189 |         border-radius: var(--border-radius-sm);
190 |         box-shadow: var(--box-shadow-sm);
191 |         padding: 1.2rem;
192 |         transition: var(--transition);
193 |         position: relative;
194 |         overflow: hidden;
195 |         opacity: 0;
196 |         transform: translateY(15px);
197 |       }
198 | 
199 |       .response-card:hover {
200 |         box-shadow: var(--box-shadow);
201 |         transform: translateY(-3px);
202 |       }
203 | 
204 |       .response-card::before {
205 |         content: "";
206 |         position: absolute;
207 |         top: 0;
208 |         left: 0;
209 |         width: 4px;
210 |         height: 100%;
211 |         background: var(--primary-color);
212 |         opacity: 0.7;
213 |       }
214 | 
215 |       .response-card.success::before {
216 |         background: var(--success-color);
217 |       }
218 | 
219 |       .response-card.error::before {
220 |         background: var(--error-color);
221 |       }
222 | 
223 |       .card-header {
224 |         display: flex;
225 |         align-items: center;
226 |         justify-content: space-between;
227 |         margin-bottom: 0.8rem;
228 |         padding-bottom: 0.8rem;
229 |         border-bottom: 1px solid rgba(0, 0, 0, 0.05);
230 |       }
231 | 
232 |       .card-title {
233 |         font-weight: 600;
234 |         font-size: 1.1rem;
235 |         color: var(--text-color);
236 |         display: flex;
237 |         align-items: center;
238 |         gap: 8px;
239 |       }
240 | 
241 |       .card-title i {
242 |         font-size: 1rem;
243 |       }
244 | 
245 |       .card-content {
246 |         display: grid;
247 |         gap: 0.8rem;
248 |       }
249 | 
250 |       .card-row {
251 |         display: flex;
252 |         flex-wrap: wrap;
253 |         gap: 0.5rem 1.5rem;
254 |       }
255 | 
256 |       .card-label {
257 |         font-weight: 600;
258 |         color: var(--text-secondary);
259 |         min-width: 120px;
260 |         flex: 0 0 auto;
261 |       }
262 | 
263 |       .card-value {
264 |         flex: 1;
265 |         word-break: break-all;
266 |       }
267 | 
268 |       /* Copy button */
269 |       .copy-btn {
270 |         background: transparent;
271 |         border: none;
272 |         color: var(--text-secondary);
273 |         cursor: pointer;
274 |         padding: 4px;
275 |         border-radius: 4px;
276 |         transition: var(--transition);
277 |         display: inline-flex;
278 |         align-items: center;
279 |         justify-content: center;
280 |         margin-left: 8px;
281 |         box-shadow: none;
282 |       }
283 | 
284 |       .copy-btn:hover {
285 |         color: var(--primary-color);
286 |         background-color: var(--primary-lighter);
287 |         transform: none;
288 |         box-shadow: none;
289 |       }
290 | 
291 |       .copy-btn i {
292 |         font-size: 0.9rem;
293 |       }
294 | 
295 |       /* Status indicators */
296 |       .status-badge {
297 |         display: inline-flex;
298 |         align-items: center;
299 |         gap: 6px;
300 |         padding: 4px 10px;
301 |         border-radius: 20px;
302 |         font-size: 0.85rem;
303 |         font-weight: 600;
304 |       }
305 | 
306 |       .status-success {
307 |         background-color: var(--success-bg);
308 |         color: var(--success-color);
309 |       }
310 | 
311 |       .status-error {
312 |         background-color: var(--error-bg);
313 |         color: var(--error-color);
314 |       }
315 | 
316 |       /* Links */
317 |       a {
318 |         color: var(--primary-color);
319 |         text-decoration: none;
320 |         transition: var(--transition);
321 |         position: relative;
322 |         display: inline-block;
323 |       }
324 | 
325 |       a::after {
326 |         content: "";
327 |         position: absolute;
328 |         width: 100%;
329 |         height: 1px;
330 |         bottom: 0;
331 |         left: 0;
332 |         background-color: var(--primary-color);
333 |         transform: scaleX(0);
334 |         transform-origin: bottom right;
335 |         transition: transform 0.3s ease-out;
336 |       }
337 | 
338 |       a:hover {
339 |         color: var(--primary-hover);
340 |       }
341 | 
342 |       a:hover::after {
343 |         transform: scaleX(1);
344 |         transform-origin: bottom left;
345 |       }
346 | 
347 |       /* Hash and key styling */
348 |       .hash-value,
349 |       .key-value {
350 |         font-family: "Consolas", "Monaco", monospace;
351 |         background-color: var(--primary-lighter);
352 |         padding: 4px 8px;
353 |         border-radius: 4px;
354 |         font-size: 0.9rem;
355 |         position: relative;
356 |         display: inline-flex;
357 |         align-items: center;
358 |         max-width: 100%;
359 |         overflow: hidden;
360 |         text-overflow: ellipsis;
361 |       }
362 | 
363 |       /* Tooltip for copied text */
364 |       .tooltip {
365 |         position: absolute;
366 |         background: rgba(0, 0, 0, 0.8);
367 |         color: white;
368 |         padding: 5px 10px;
369 |         border-radius: 4px;
370 |         font-size: 0.8rem;
371 |         top: -30px;
372 |         left: 50%;
373 |         transform: translateX(-50%);
374 |         opacity: 0;
375 |         visibility: hidden;
376 |         transition: opacity 0.3s, visibility 0.3s;
377 |         z-index: 100;
378 |         white-space: nowrap;
379 |       }
380 | 
381 |       .tooltip.show {
382 |         opacity: 1;
383 |         visibility: visible;
384 |       }
385 | 
386 |       /* Animations */
387 |       @keyframes fadeIn {
388 |         from {
389 |           opacity: 0;
390 |           transform: translateY(20px);
391 |         }
392 |         to {
393 |           opacity: 1;
394 |           transform: translateY(0);
395 |         }
396 |       }
397 | 
398 |       @keyframes slideInRight {
399 |         from {
400 |           opacity: 0;
401 |           transform: translateX(30px);
402 |         }
403 |         to {
404 |           opacity: 1;
405 |           transform: translateX(0);
406 |         }
407 |       }
408 | 
409 |       @keyframes spin {
410 |         to {
411 |           transform: rotate(360deg);
412 |         }
413 |       }
414 | 
415 |       @keyframes pulse {
416 |         0% {
417 |           box-shadow: 0 0 0 0 rgba(67, 97, 238, 0.4);
418 |         }
419 |         70% {
420 |           box-shadow: 0 0 0 10px rgba(67, 97, 238, 0);
421 |         }
422 |         100% {
423 |           box-shadow: 0 0 0 0 rgba(67, 97, 238, 0);
424 |         }
425 |       }
426 | 
427 |       @keyframes shimmer {
428 |         0% {
429 |           background-position: -200% 0;
430 |         }
431 |         100% {
432 |           background-position: 200% 0;
433 |         }
434 |       }
435 | 
436 |       .shimmer-effect {
437 |         background: linear-gradient(
438 |           90deg,
439 |           var(--card-bg) 0%,
440 |           var(--primary-lighter) 50%,
441 |           var(--card-bg) 100%
442 |         );
443 |         background-size: 200% 100%;
444 |         animation: shimmer 1.5s infinite;
445 |       }
446 | 
447 |       #downloadBtn {
448 |         animation: pulse 2s infinite;
449 |       }
450 | 
451 |       /* Success animation */
452 |       @keyframes checkmark {
453 |         0% {
454 |           stroke-dashoffset: 100;
455 |         }
456 |         100% {
457 |           stroke-dashoffset: 0;
458 |         }
459 |       }
460 | 
461 |       .checkmark-circle {
462 |         stroke-dasharray: 166;
463 |         stroke-dashoffset: 166;
464 |         stroke-width: 2;
465 |         stroke-miterlimit: 10;
466 |         stroke: var(--success-color);
467 |         fill: none;
468 |         animation: checkmark 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
469 |       }
470 | 
471 |       .checkmark {
472 |         width: 25px;
473 |         height: 25px;
474 |         border-radius: 50%;
475 |         display: inline-block;
476 |         stroke-width: 2;
477 |         stroke: var(--success-color);
478 |         stroke-miterlimit: 10;
479 |         margin-right: 8px;
480 |         box-shadow: inset 0px 0px 0px var(--success-color);
481 |         animation: fill 0.4s ease-in-out 0.4s forwards,
482 |           scale 0.3s ease-in-out 0.9s both;
483 |       }
484 | 
485 |       .checkmark-check {
486 |         transform-origin: 50% 50%;
487 |         stroke-dasharray: 48;
488 |         stroke-dashoffset: 48;
489 |         animation: checkmark 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.4s forwards;
490 |       }
491 | 
492 |       @keyframes fill {
493 |         100% {
494 |           box-shadow: inset 0px 0px 0px 30px transparent;
495 |         }
496 |       }
497 | 
498 |       @keyframes scale {
499 |         0%,
500 |         100% {
501 |           transform: none;
502 |         }
503 |         50% {
504 |           transform: scale3d(1.1, 1.1, 1);
505 |         }
506 |       }
507 | 
508 |       /* Responsive design */
509 |       @media (max-width: 768px) {
510 |         h2 {
511 |           font-size: 1.5rem;
512 |         }
513 | 
514 |         button {
515 |           padding: 10px 20px;
516 |           font-size: 0.9rem;
517 |         }
518 | 
519 |         .card-row {
520 |           flex-direction: column;
521 |           gap: 0.3rem;
522 |         }
523 | 
524 |         .card-label {
525 |           min-width: 100%;
526 |         }
527 |       }
528 | 
529 |       @media (max-width: 480px) {
530 |         .container {
531 |           padding: 0 0.5rem;
532 |         }
533 | 
534 |         h2 {
535 |           font-size: 1.3rem;
536 |         }
537 | 
538 |         .response-card {
539 |           padding: 1rem;
540 |         }
541 | 
542 |         .card-title {
543 |           font-size: 1rem;
544 |         }
545 | 
546 |         .hash-value,
547 |         .key-value {
548 |           font-size: 0.8rem;
549 |         }
550 |       }
551 |     </style>
552 | 
553 |     <!-- Font Awesome for icons -->
554 |     <link
555 |       rel="stylesheet"
556 |       href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
557 |     />
558 |   </head>
559 |   <body>
560 |     <div class="container">
561 |       <h2>Download your data securely.</h2>
562 |       <button id="downloadBtn">Download</button>
563 |       <div id="uploadLoadingElement" style="display: none">
564 |         <span class="loading-spinner"></span>
565 |         Uploading your data to Blockchain to prevent tempering...
566 |       </div>
567 | 
568 |       <div id="backendResponseArea" style="display: none">
569 |         <div class="response-header">
570 |           <h3>Transaction Details</h3>
571 |           <span class="response-timestamp" id="responseTimestamp"></span>
572 |         </div>
573 |         <div id="backendResponseContent"></div>
574 |       </div>
575 |     </div>
576 | 
577 |     <!-- jsPDF CDN -->
578 |     <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
579 | 
580 |     <!-- JavaScript -->
581 |     <script>
582 |       const downloadBtn = document.getElementById("downloadBtn");
583 |       const uploadLoadingElement = document.getElementById(
584 |         "uploadLoadingElement"
585 |       );
586 |       const backendResponseArea = document.getElementById(
587 |         "backendResponseArea"
588 |       );
589 |       const backendResponseContent = document.getElementById(
590 |         "backendResponseContent"
591 |       );
592 |       const responseTimestamp = document.getElementById("responseTimestamp");
593 | 
594 |       // Helper function to format current date and time
595 |       function formatDateTime() {
596 |         const now = new Date();
597 |         return now.toLocaleString();
598 |       }
599 | 
600 |       // Helper function to create copy button with tooltip
601 |       function createCopyButton(textToCopy) {
602 |         const copyBtn = document.createElement("button");
603 |         copyBtn.className = "copy-btn";
604 |         copyBtn.innerHTML = '<i class="fas fa-copy"></i>';
605 |         copyBtn.setAttribute("aria-label", "Copy to clipboard");
606 | 
607 |         const tooltip = document.createElement("span");
608 |         tooltip.className = "tooltip";
609 |         tooltip.textContent = "Copied!";
610 |         copyBtn.appendChild(tooltip);
611 | 
612 |         copyBtn.addEventListener("click", (e) => {
613 |           e.stopPropagation();
614 |           navigator.clipboard.writeText(textToCopy).then(() => {
615 |             tooltip.classList.add("show");
616 |             setTimeout(() => {
617 |               tooltip.classList.remove("show");
618 |             }, 2000);
619 |           });
620 |         });
621 | 
622 |         return copyBtn;
623 |       }
624 | 
625 |       // Helper function to create animated checkmark SVG
626 |       function createCheckmark() {
627 |         return `
628 |           <svg class="checkmark" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 52 52">
629 |             <circle class="checkmark-circle" cx="26" cy="26" r="25" fill="none"/>
630 |             <path class="checkmark-check" fill="none" d="M14.1 27.2l7.1 7.2 16.7-16.8"/>
631 |           </svg>
632 |         `;
633 |       }
634 | 
635 |       downloadBtn.addEventListener("click", async () => {
636 |         const { jsPDF } = window.jspdf;
637 |         const doc = new jsPDF();
638 |         doc.text("This is a sample PDF file generated by jsPDF!", 10, 10);
639 | 
640 |         const pdfBlob = doc.output("blob");
641 |         const formData = new FormData();
642 |         formData.append("title", "Sample PDF Upload");
643 |         function generateRandomChar() {
644 |           const characters =
645 |             "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789"; // Define allowed characters
646 |           const randomIndex = Math.floor(Math.random() * characters.length); // Generate random index
647 |           return characters[randomIndex]; // Return the character at the random index
648 |         }
649 | 
650 |         // Example usage
651 |         const randomChar = generateRandomChar();
652 |         pdfName = randomChar + ".pdf";
653 |         formData.append("file", pdfBlob, pdfName);
654 | 
655 |         uploadLoadingElement.style.display = "block";
656 |         backendResponseArea.style.display = "none";
657 |         backendResponseArea.classList.remove("visible");
658 |         downloadBtn.disabled = true;
659 | 
660 |         try {
661 |           const response = await fetch("http://127.0.0.1:8000/pdf", {
662 |             method: "POST",
663 |             body: formData,
664 |           });
665 | 
666 |           const data = await response.json();
667 |           displayBackendResponse(data);
668 |         } catch (err) {
669 |           backendResponseArea.style.display = "block";
670 |           setTimeout(() => {
671 |             backendResponseArea.classList.add("visible");
672 |           }, 10);
673 | 
674 |           backendResponseContent.innerHTML = `
675 |             <div class="response-card error" style="animation: fadeIn 0.5s forwards">
676 |               <div class="card-header">
677 |                 <div class="card-title">
678 |                   <i class="fas fa-exclamation-circle"></i> Error
679 |                 </div>
680 |                 <div class="status-badge status-error">
681 |                   <i class="fas fa-times-circle"></i> Failed
682 |                 </div>
683 |               </div>
684 |               <div class="card-content">
685 |                 <div class="card-row">
686 |                   <div class="card-label">Message:</div>
687 |                   <div class="card-value">${err.message}</div>
688 |                 </div>
689 |               </div>
690 |             </div>
691 |           `;
692 |         } finally {
693 |           uploadLoadingElement.style.display = "none";
694 |           downloadBtn.disabled = false;
695 |         }
696 |       });
697 | 
698 |       // Enhanced function to display backend response
699 |       function displayBackendResponse(data) {
700 |         backendResponseArea.style.display = "block";
701 |         responseTimestamp.textContent = formatDateTime();
702 | 
703 |         // Small delay to trigger animation
704 |         setTimeout(() => {
705 |           backendResponseArea.classList.add("visible");
706 |         }, 10);
707 | 
708 |         backendResponseContent.innerHTML = ""; // Clear previous content
709 | 
710 |         // Main status card
711 |         const statusCard = document.createElement("div");
712 |         statusCard.className = "response-card";
713 |         statusCard.innerHTML = `
714 |           <div class="card-header">
715 |             <div class="card-title">
716 |               <i class="fas fa-info-circle"></i> Transaction Status
717 |             </div>
718 |             <div class="status-badge ${
719 |               data.status === "success" ? "status-success" : "status-error"
720 |             }">
721 |               ${
722 |                 data.status === "success"
723 |                   ? createCheckmark() + "Success"
724 |                   : createCheckmark() + "Success"
725 |               }
726 |             </div>
727 |           </div>
728 |           <div class="card-content">
729 |             <div class="card-row">
730 |               <div class="card-label">Status:</div>
731 |               <div class="card-value">${data.status}</div>
732 |             </div>
733 |           </div>
734 |         `;
735 |         backendResponseContent.appendChild(statusCard);
736 | 
737 |         // Animate the card entrance with a slight delay
738 |         setTimeout(() => {
739 |           statusCard.style.animation = "fadeIn 0.5s forwards";
740 |         }, 100);
741 | 
742 |         // User verification card
743 |         if (data.user_id_for_verification) {
744 |           const userCard = document.createElement("div");
745 |           userCard.className = "response-card";
746 |           userCard.innerHTML = `
747 |             <div class="card-header">
748 |               <div class="card-title">
749 |                 <i class="fas fa-user-shield"></i> User Verification
750 |               </div>
751 |             </div>
752 |             <div class="card-content">
753 |               <div class="card-row">
754 |                 <div class="card-label">User ID:</div>
755 |                 <div class="card-value">
756 |                   <span class="hash-value">${data.user_id_for_verification}</span>
757 |                 </div>
758 |               </div>
759 |             </div>
760 |           `;
761 |           backendResponseContent.appendChild(userCard);
762 | 
763 |           // Add copy button
764 |           const userIdValue = userCard.querySelector(".hash-value");
765 |           userIdValue.appendChild(
766 |             createCopyButton(data.user_id_for_verification)
767 |           );
768 | 
769 |           // Animate with delay
770 |           setTimeout(() => {
771 |             userCard.style.animation = "fadeIn 0.5s forwards";
772 |           }, 200);
773 |         }
774 | 
775 |         // Encryption key card
776 |         if (data.encryption_key_derived) {
777 |           const keyCard = document.createElement("div");
778 |           keyCard.className = "response-card";
779 |           const truncatedKey =
780 |             data.encryption_key_derived.substring(0, 8) + "...";
781 | 
782 |           keyCard.innerHTML = `
783 |             <div class="card-header">
784 |               <div class="card-title">
785 |                 <i class="fas fa-key"></i> Encryption
786 |               </div>
787 |             </div>
788 |             <div class="card-content">
789 |               <div class="card-row">
790 |                 <div class="card-label">Key Derived:</div>
791 |                 <div class="card-value">
792 |                   <span class="key-value">${truncatedKey}</span>
793 |                 </div>
794 |               </div>
795 |             </div>
796 |           `;
797 |           backendResponseContent.appendChild(keyCard);
798 | 
799 |           // Add copy button for full key
800 |           const keyValue = keyCard.querySelector(".key-value");
801 |           keyValue.appendChild(createCopyButton(data.encryption_key_derived));
802 | 
803 |           // Animate with delay
804 |           setTimeout(() => {
805 |             keyCard.style.animation = "fadeIn 0.5s forwards";
806 |           }, 300);
807 |         }
808 | 
809 |         // IPFS Upload card
810 |         if (data.ipfs_upload) {
811 |           const ipfsCard = document.createElement("div");
812 |           ipfsCard.className = `response-card ${
813 |             data.ipfs_upload.success ? "success" : "error"
814 |           }`;
815 | 
816 |           let ipfsContent = `
817 |             <div class="card-header">
818 |               <div class="card-title">
819 |                 <i class="fas fa-cloud-upload-alt"></i> IPFS Upload
820 |               </div>
821 |               <div class="status-badge ${
822 |                 data.ipfs_upload.success ? "status-success" : "status-error"
823 |               }">
824 |                 ${
825 |                   data.ipfs_upload.success
826 |                     ? createCheckmark() + "Success"
827 |                     : '<i class="fas fa-times-circle"></i> Failed'
828 |                 }
829 |               </div>
830 |             </div>
831 |             <div class="card-content">
832 |           `;
833 | 
834 |           if (data.ipfs_upload.success) {
835 |             if (data.ipfs_upload.cid) {
836 |               ipfsContent += `
837 |                 <div class="card-row">
838 |                   <div class="card-label">CID:</div>
839 |                   <div class="card-value">
840 |                     <span class="hash-value">${data.ipfs_upload.cid}</span>
841 |                   </div>
842 |                 </div>
843 |               `;
844 |             }
845 | 
846 |             if (data.ipfs_upload.ipfs_gateway_url) {
847 |               ipfsContent += `
848 |                 <div class="card-row">
849 |                   <div class="card-label">IPFS Link:</div>
850 |                   <div class="card-value">
851 |                     <a href="${data.ipfs_upload.ipfs_gateway_url}" target="_blank">
852 |                       ${data.ipfs_upload.ipfs_gateway_url}
853 |                       <i class="fas fa-external-link-alt" style="font-size: 0.8em; margin-left: 4px;"></i>
854 |                     </a>
855 |                   </div>
856 |                 </div>
857 |               `;
858 |             }
859 |           } else if (data.ipfs_upload.error) {
860 |             ipfsContent += `
861 |               <div class="card-row">
862 |                 <div class="card-label">Error:</div>
863 |                 <div class="card-value">${data.ipfs_upload.error}</div>
864 |               </div>
865 |             `;
866 |           }
867 | 
868 |           ipfsContent += `</div>`;
869 |           ipfsCard.innerHTML = ipfsContent;
870 |           backendResponseContent.appendChild(ipfsCard);
871 | 
872 |           // Add copy button for CID if it exists
873 |           if (data.ipfs_upload.success && data.ipfs_upload.cid) {
874 |             const cidValue = ipfsCard.querySelector(".hash-value");
875 |             cidValue.appendChild(createCopyButton(data.ipfs_upload.cid));
876 |           }
877 | 
878 |           // Animate with delay
879 |           setTimeout(() => {
880 |             ipfsCard.style.animation = "fadeIn 0.5s forwards";
881 |           }, 400);
882 |         }
883 | 
884 |         // Blockchain Storage card
885 |         if (data.blockchain_storage) {
886 |           const blockchainCard = document.createElement("div");
887 |           blockchainCard.className = `response-card ${
888 |             data.blockchain_storage.success ? "success" : "error"
889 |           }`;
890 | 
891 |           let blockchainContent = `
892 |             <div class="card-header">
893 |               <div class="card-title">
894 |                 <i class="fas fa-link"></i> Blockchain Storage
895 |               </div>
896 |               <div class="status-badge ${
897 |                 data.blockchain_storage.success
898 |                   ? "status-success"
899 |                   : "status-error"
900 |               }">
901 |                 ${
902 |                   data.blockchain_storage.success
903 |                     ? createCheckmark() + "Success"
904 |                     : '<i class="fas fa-times-circle"></i> Failed'
905 |                 }
906 |               </div>
907 |             </div>
908 |             <div class="card-content">
909 |           `;
910 | 
911 |           if (data.blockchain_storage.success) {
912 |             if (data.blockchain_storage.tx_hash) {
913 |               blockchainContent += `
914 |                 <div class="card-row">
915 |                   <div class="card-label">Transaction Hash:</div>
916 |                   <div class="card-value">
917 |                     <span class="hash-value">${data.blockchain_storage.tx_hash}</span>
918 |                   </div>
919 |                 </div>
920 |               `;
921 |             }
922 | 
923 |             if (data.blockchain_storage.block_explorer_url) {
924 |               blockchainContent += `
925 |                 <div class="card-row">
926 |                   <div class="card-label">Block Explorer:</div>
927 |                   <div class="card-value">
928 |                     <a href="${data.blockchain_storage.block_explorer_url}" target="_blank">
929 |                       View on Block Explorer
930 |                       <i class="fas fa-external-link-alt" style="font-size: 0.8em; margin-left: 4px;"></i>
931 |                     </a>
932 |                   </div>
933 |                 </div>
934 |               `;
935 |             }
936 |           } else if (data.blockchain_storage.error) {
937 |             blockchainContent += `
938 |               <div class="card-row">
939 |                 <div class="card-label">Error:</div>
940 |                 <div class="card-value">${data.blockchain_storage.error}</div>
941 |               </div>
942 |             `;
943 |           }
944 | 
945 |           blockchainContent += `</div>`;
946 |           blockchainCard.innerHTML = blockchainContent;
947 |           backendResponseContent.appendChild(blockchainCard);
948 | 
949 |           // Add copy button for transaction hash if it exists
950 |           if (
951 |             data.blockchain_storage.success &&
952 |             data.blockchain_storage.tx_hash
953 |           ) {
954 |             const txHashValue = blockchainCard.querySelector(".hash-value");
955 |             txHashValue.appendChild(
956 |               createCopyButton(data.blockchain_storage.tx_hash)
957 |             );
958 |           }
959 | 
960 |           // Animate with delay
961 |           setTimeout(() => {
962 |             blockchainCard.style.animation = "fadeIn 0.5s forwards";
963 |           }, 500);
964 |         }
965 | 
966 |         // Add event listeners to all cards for hover effects
967 |         const allCards =
968 |           backendResponseContent.querySelectorAll(".response-card");
969 |         allCards.forEach((card) => {
970 |           card.addEventListener("mouseenter", () => {
971 |             card.style.transform = "translateY(-5px)";
972 |           });
973 | 
974 |           card.addEventListener("mouseleave", () => {
975 |             card.style.transform = "";
976 |           });
977 |         });
978 |       }
979 |     </script>
980 |   </body>
981 | </html>
982 | 


--------------------------------------------------------------------------------