Skip to content

Commit

Permalink
Carpeso improvement + hover effect on images + network error (#31)
Browse files Browse the repository at this point in the history 
* Manage network error

* Change Carpeso format

* Add hover effect on images
  • Loading branch information
@HugoGresse
HugoGresse authored May 4, 2022
1 parent ca7f59d commit b50f465
Show file tree
Hide file tree
Showing 6 changed files with 98 additions and 17 deletions.
2 changes: 1 addition & 1 deletion indexCarperso.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<title>AI Taxonomist - Caperso</title>
<title>AI Taxonomist - Carpeso</title>

<link rel="icon" type="image/png" sizes="32x32" href="data:image/png;base64,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">

Expand Down
12 changes: 11 additions & 1 deletion src/ImageSelected.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,6 +43,14 @@ export class ImageSelected extends LitElement {
overflow: hidden;
margin-right: 6px;
margin-bottom: 6px;
z-index: 10;
transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
transform-origin: top center;
}
.imgContainer:hover {
cursor: pointer;
transform: scale(3);
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
}
.imgContainer img {
object-position: center;
Expand Down Expand Up @@ -120,7 +128,9 @@ export class ImageSelected extends LitElement {
${this.images.map(
image => html`
<div class="imgContainer">
<img width="400" src="${URL.createObjectURL(image)}" alt="" />
<a href="${URL.createObjectURL(image)}" target="_blank">
<img width="400" src="${URL.createObjectURL(image)}" alt="" />
</a>
<button class="imgRemove" @click="${this.__onImageRemove(image)}">
<svg
xmlns="http://www.w3.org/2000/svg"
Expand Down
84 changes: 72 additions & 12 deletions src/TaxonResults.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,11 @@ import './components/ai-loader.js'
import { GBIF_LOGO } from './utils/icons.js'
import { Results, ResultType } from './utils/types.js'

const getDomainName = (url: string) => {
const domain = url.split('/')[2]
return domain.replace('www.', '')
}

export class TaxonResults extends LitElement {
static styles = css`
.container {
Expand Down Expand Up @@ -89,6 +94,7 @@ export class TaxonResults extends LitElement {
.result:hover {
border-color: var(--ai-taxonomist-accent-color);
z-index: 10;
}
.result:nth-child(1) {
Expand Down Expand Up @@ -171,7 +177,7 @@ export class TaxonResults extends LitElement {
padding-left: 0.5rem;
}
.family span {
.family span.familyName {
text-align: left;
font-style: italic;
background-color: var(--ai-taxonomist-separator-border-color);
Expand All @@ -183,7 +189,8 @@ export class TaxonResults extends LitElement {
display: block;
}
.gbif {
.gbif,
.url {
display: flex;
align-items: center;
width: 50px;
Expand All @@ -193,6 +200,23 @@ export class TaxonResults extends LitElement {
background-color: var(--ai-taxonomist-separator-border-color);
gap: 2px;
transition: all 0.15s ease-in-out;
text-decoration: none;
}
.url {
width: 100%;
}
.url span {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
color: var(--ai-taxonomist-accent-color);
}
.gbif:hover,
.url:hover {
filter: brightness(80%);
}
.gbif:hover {
Expand All @@ -209,14 +233,28 @@ export class TaxonResults extends LitElement {
margin-bottom: 6px;
}
.imgLink {
display: flex;
z-index: 9;
transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
transform-origin: center;
border-radius: 4px;
margin-left: 12px;
overflow: hidden;
}
.imgLink:hover {
cursor: pointer;
transform: scale(3);
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
z-index: 10;
}
.imgContainer img {
object-position: center;
object-fit: cover;
aspect-ratio: 1;
height: 100px;
width: 100px;
marginleft: 12px;
border-radius: 4px;
background: var(--ai-taxonomist-background);
color: transparent;
}
Expand Down Expand Up @@ -352,12 +390,15 @@ export class TaxonResults extends LitElement {
<div>${round(result.score * 100)}%</div>
</div>
<div class="col col-text species">
<p class="speciesName">
${!result.formatTaxonName
? html` <span>${result.taxonName}</span>`
: result.taxonName}<span> ${result.author}</span>
</p>
${result.taxonName
? html`<p class="speciesName">
${!result.formatTaxonName
? html` <span>${result.taxonName}</span>`
: result.taxonName}<span> ${result.author}</span>
</p>`
: ''}
<p>${result.commonNames[0]}</p>
${result.additionalText ? html`<p>${result.additionalText}</p>` : ''}
${template
? html` <div
@click=${this.onAttachmentClick(result)}
Expand All @@ -368,7 +409,11 @@ export class TaxonResults extends LitElement {
: ''}
</div>
<div class="col col-text family">
${result.family ? html`<span title="${result.family}">${result.family}</span>` : ''}
${result.family
? html`<span title="${result.family}" class="familyName"
>${result.family}</span
>`
: ''}
${result.gbifUrl
? html`<a href="${result.gbifUrl}" target="_blank" class="gbif"
>${GBIF_LOGO}
Expand All @@ -384,12 +429,27 @@ export class TaxonResults extends LitElement {
</svg>
</a>`
: null}
${result.url
? html`<a href="${result.url}" target="_blank" class="url"
><span>${getDomainName(result.url)}</span
><svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
>
<path
d="M14,3V5H17.59L7.76,14.83L9.17,16.24L19,6.41V10H21V3M19,19H5V5H12V3H5C3.89,3 3,3.9 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V12H19V19Z"
/>
</svg>
</a>`
: null}
</div>
<div class="col imgContainer">
${result.images.map(
image => html`
<a href="${image.url}" title="${image.alt}" target="_blank"
><img src="${image.url}" alt="${image.alt}"
<a href="${image.url}" title="${image.alt}" target="_blank" class="imgLink">
<img src="${image.url}" alt="${image.alt}"
/></a>
`
)}
Expand Down
4 changes: 4 additions & 0 deletions src/utils/identifyRequest.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,10 @@ export const identifyRequest = async (
body: form,
})

if (!response.ok) {
return `Error: ${response.statusText}`
}

switch (backendFormat) {
default:
case BackendFormat.PLANTNET:
Expand Down
8 changes: 5 additions & 3 deletions src/utils/identifyRequestUtils.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -129,17 +129,19 @@ export const formatCarpersoResponse = async (response: Response, apiUrl: string)
results: results.details.map((result: CarpesoServerResult) => ({
score: result.score,
taxonName: result.name,
author: null,
author: result.authorship,
family: null,
gbifUrl: null,
commonNames: [result.nutrition ? `Nutrition : ${result.nutrition} ufl/kg MS` : ''],
url: result.url ? result.url : undefined,
commonNames: [result.vernacularName],
additionalText: result.nutrition ? `Nutrition : ${result.nutrition} ufl/kg MS` : undefined,
images: result.images
.map(image => ({
url: `${origin}/${image.url}`,
alt: `${result.name} ${origin}/${image.url}`,
}))
.slice(0, 3),
formatTaxonName: false,
formatTaxonName: true,
})),
}
}
5 changes: 5 additions & 0 deletions src/utils/types.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -57,8 +57,10 @@ export type ResultType = {
author: string | null
family: string | null
commonNames: string[]
additionalText?: string
images: ImageType[]
gbifUrl: string | null
url?: string
formatTaxonName: boolean
}

Expand Down Expand Up @@ -93,8 +95,11 @@ export type IdentifyC4CErrorResponse = {
// Carpeso backend formats
export type CarpesoServerResult = {
name: string
authorship: string | null
vernacularName: string
score: number
nutrition: number
url: string | null
images: {
url: string
}[]
Expand Down

0 comments on commit b50f465

Please sign in to comment.