Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Support
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in / Register
Toggle navigation
2021-210
Project overview
Project overview
Details
Activity
Releases
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Issues
0
Issues
0
List
Boards
Labels
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Analytics
Analytics
CI / CD
Repository
Value Stream
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
2021-210
2021-210
Commits
e5ef6b8b
Commit
e5ef6b8b
authored
Nov 25, 2021
by
salukbawa
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
create take image module
parent
08bf7b02
Changes
6
Hide whitespace changes
Inline
Side-by-side
Showing
6 changed files
with
161 additions
and
0 deletions
+161
-0
ClientApp/src/app/skin-disease-take-image/skin-disease-take-image-routing.module.ts
...ease-take-image/skin-disease-take-image-routing.module.ts
+17
-0
ClientApp/src/app/skin-disease-take-image/skin-disease-take-image.module.ts
...skin-disease-take-image/skin-disease-take-image.module.ts
+21
-0
ClientApp/src/app/skin-disease-take-image/skin-disease-take-image.page.html
...skin-disease-take-image/skin-disease-take-image.page.html
+43
-0
ClientApp/src/app/skin-disease-take-image/skin-disease-take-image.page.scss
...skin-disease-take-image/skin-disease-take-image.page.scss
+0
-0
ClientApp/src/app/skin-disease-take-image/skin-disease-take-image.page.spec.ts
...n-disease-take-image/skin-disease-take-image.page.spec.ts
+24
-0
ClientApp/src/app/skin-disease-take-image/skin-disease-take-image.page.ts
...p/skin-disease-take-image/skin-disease-take-image.page.ts
+56
-0
No files found.
ClientApp/src/app/skin-disease-take-image/skin-disease-take-image-routing.module.ts
0 → 100644
View file @
e5ef6b8b
import
{
NgModule
}
from
'
@angular/core
'
;
import
{
Routes
,
RouterModule
}
from
'
@angular/router
'
;
import
{
SkinDiseaseTakeImagePage
}
from
'
./skin-disease-take-image.page
'
;
const
routes
:
Routes
=
[
{
path
:
''
,
component
:
SkinDiseaseTakeImagePage
}
];
@
NgModule
({
imports
:
[
RouterModule
.
forChild
(
routes
)],
exports
:
[
RouterModule
],
})
export
class
SkinDiseaseTakeImagePageRoutingModule
{}
ClientApp/src/app/skin-disease-take-image/skin-disease-take-image.module.ts
0 → 100644
View file @
e5ef6b8b
import
{
NgModule
}
from
'
@angular/core
'
;
import
{
CommonModule
}
from
'
@angular/common
'
;
import
{
FormsModule
,
ReactiveFormsModule
}
from
'
@angular/forms
'
;
import
{
IonicModule
}
from
'
@ionic/angular
'
;
import
{
SkinDiseaseTakeImagePageRoutingModule
}
from
'
./skin-disease-take-image-routing.module
'
;
import
{
SkinDiseaseTakeImagePage
}
from
'
./skin-disease-take-image.page
'
;
@
NgModule
({
imports
:
[
CommonModule
,
FormsModule
,
IonicModule
,
SkinDiseaseTakeImagePageRoutingModule
,
ReactiveFormsModule
],
declarations
:
[
SkinDiseaseTakeImagePage
]
})
export
class
SkinDiseaseTakeImagePageModule
{}
ClientApp/src/app/skin-disease-take-image/skin-disease-take-image.page.html
0 → 100644
View file @
e5ef6b8b
<ion-header>
<ion-toolbar>
<ion-buttons
slot=
"start"
>
<ion-back-button></ion-back-button>
</ion-buttons>
</ion-toolbar>
</ion-header>
<ion-content>
<div
class=
"container-fluid"
style=
"background-color: #E9F0FB"
>
<div
class=
"row ion-justify-content-center ion-align-items-center"
style=
"height: 100vh"
>
<div
class=
"col-11"
>
<div
class=
"row ion-justify-content-center"
>
<div
class=
"col-5"
>
<img
src=
"assets/img.png"
>
</div>
</div>
<div
class=
"row"
>
<div
class=
"col"
>
<h1
class=
"ion-text-center fw-bolder"
>
BEST BARK
</h1>
<h3
class=
"ion-text-center"
>
Skin disease detection
</h3>
<h5
class=
"ion-text-center text-success"
*ngIf=
"prediction"
>
Detected disease: {{prediction['pred']}}
</h5>
</div>
</div>
<form
[formGroup] =
"uploadForm"
(ngSubmit)=
"onSubmit()"
>
<img
id=
"blah"
[src]=
"imageSrc || 'http://placehold.it/180'"
alt=
"your image"
style=
"width: 100%"
*ngIf=
"imageSrc"
class=
"ion-text-center"
/>
<div
class=
"d-grid gap-2"
*ngIf=
"!imageSrc"
>
<label
for=
"formFile"
class=
"btn btn-lg btn-secondary"
type=
"button"
style=
"background-color: #5b628f"
>
Take a photo / Select image
</label>
<input
class=
"btn btn-lg btn-secondary"
type=
"file"
id=
"formFile"
style=
"visibility:hidden;"
accept=
"image/*;capture=camera"
(change)=
"onFileSelect($event)"
>
</div>
<div
class=
"d-grid gap-2 mt-2"
>
<button
class=
"btn btn-lg btn-secondary"
type=
"submit"
style=
"background-color: #5b628f"
>
{{loading ? 'Processing':'Process the photo'}}
</button>
</div>
</form>
</div>
</div>
</div>
</ion-content>
ClientApp/src/app/skin-disease-take-image/skin-disease-take-image.page.scss
0 → 100644
View file @
e5ef6b8b
ClientApp/src/app/skin-disease-take-image/skin-disease-take-image.page.spec.ts
0 → 100644
View file @
e5ef6b8b
import
{
ComponentFixture
,
TestBed
,
waitForAsync
}
from
'
@angular/core/testing
'
;
import
{
IonicModule
}
from
'
@ionic/angular
'
;
import
{
SkinDiseaseTakeImagePage
}
from
'
./skin-disease-take-image.page
'
;
describe
(
'
SkinDiseaseTakeImagePage
'
,
()
=>
{
let
component
:
SkinDiseaseTakeImagePage
;
let
fixture
:
ComponentFixture
<
SkinDiseaseTakeImagePage
>
;
beforeEach
(
waitForAsync
(()
=>
{
TestBed
.
configureTestingModule
({
declarations
:
[
SkinDiseaseTakeImagePage
],
imports
:
[
IonicModule
.
forRoot
()]
}).
compileComponents
();
fixture
=
TestBed
.
createComponent
(
SkinDiseaseTakeImagePage
);
component
=
fixture
.
componentInstance
;
fixture
.
detectChanges
();
}));
it
(
'
should create
'
,
()
=>
{
expect
(
component
).
toBeTruthy
();
});
});
ClientApp/src/app/skin-disease-take-image/skin-disease-take-image.page.ts
0 → 100644
View file @
e5ef6b8b
import
{
Component
,
OnInit
}
from
'
@angular/core
'
;
import
{
PythonBackendService
}
from
"
../core/python-backend.service
"
;
import
{
FormBuilder
,
FormGroup
}
from
"
@angular/forms
"
;
import
{
Router
}
from
"
@angular/router
"
;
@
Component
({
selector
:
'
app-skin-disease-take-image
'
,
templateUrl
:
'
./skin-disease-take-image.page.html
'
,
styleUrls
:
[
'
./skin-disease-take-image.page.scss
'
],
})
export
class
SkinDiseaseTakeImagePage
implements
OnInit
{
uploadForm
:
FormGroup
;
imageSrc
:
any
;
public
prediction
:
string
;
loading
=
false
;
constructor
(
private
pythonBackendService
:
PythonBackendService
,
private
formBuilder
:
FormBuilder
,
private
router
:
Router
)
{
}
ngOnInit
()
{
this
.
uploadForm
=
this
.
formBuilder
.
group
({
file
:
[
''
]
});
}
onFileSelect
(
event
)
{
if
(
event
.
target
.
files
.
length
>
0
)
{
const
file
=
event
.
target
.
files
[
0
];
this
.
uploadForm
.
get
(
'
file
'
).
setValue
(
file
);
const
reader
=
new
FileReader
();
reader
.
onload
=
e
=>
this
.
imageSrc
=
reader
.
result
;
reader
.
readAsDataURL
(
file
);
}
}
onSubmit
()
{
const
formData
=
new
FormData
();
formData
.
append
(
'
file
'
,
this
.
uploadForm
.
get
(
'
file
'
).
value
);
this
.
loading
=
true
;
this
.
pythonBackendService
.
predictSkinDisease
(
formData
)
.
subscribe
(
res
=>
{
console
.
log
(
res
);
this
.
loading
=
false
;
this
.
prediction
=
res
;
this
.
router
.
navigate
([
'
/skin-disease-result/
'
+
res
.
pred
]);
},
error
=>
{
console
.
log
(
error
);
});
}
}
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment