@webwriter/neural-network/src/components/cards/network_info_card.ts

Deep learning visualization for feed-forward networks with custom datasets, training and prediction.

import { LitElementWw } from '@webwriter/lit'
import { TemplateResult, html } from 'lit'
import { customElement } from 'lit/decorators.js'
import { consume } from '@lit/context'

import { globalStyles } from '@/global_styles'

import { editableContext } from '@/contexts/editable_context'
import type { Settings } from '@/types/settings'
import { settingsContext } from '@/contexts/settings_context'
import type { CLayerConf } from '@/types/c_layer_conf'
import { layerConfsContext } from '@/contexts/layer_confs_context'
import type { CNetwork } from '@/components/network/network'
import { networkContext } from '@/contexts/network_context'
import type { ModelConf } from '@/types/model_conf'
import { modelConfContext } from '@/contexts/model_conf_context'
import { CCard } from '../reusables/c-card'
import { msg } from '@lit/localize'

export class NetworkInfoCard extends LitElementWw {
  static scopedElements = {
    'c-card': CCard,
  }

  @consume({ context: editableContext, subscribe: true })
  accessor editable: boolean

  @consume({ context: settingsContext, subscribe: true })
  accessor settings: Settings

  @consume({ context: layerConfsContext, subscribe: true })
  accessor layerConfs: CLayerConf[]

  @consume({ context: networkContext, subscribe: true })
  accessor network: CNetwork

  @consume({ context: modelConfContext, subscribe: true })
  accessor modelConf: ModelConf

  // RENDER  - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
  static styles = globalStyles

  // RENDER  - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
  render(): TemplateResult<1> {
    return html`
      <c-card>
        <div slot="title">${msg('Network')}</div>
        <div slot="content">
          ${this.layerConfs.length
            ? html`<p>
                ${msg('Your network currently contains')}${' '}${this.layerConfs
                  .length}${' '}${msg('layers')}.
              </p>`
            : html`<p>${msg('Your network is currently empty.')}</p>`}
          ${!this.modelConf.model &&
          (this.editable || this.settings.mayAddAndRemoveLayers)
            ? html`
                ${!this.network.getInputLayers().length
                  ? html`
                      <p>
                        ${msg(
                          'You currently do not have an input layer. Drag one onto the canvas!',
                        )}
                      </p>
                    `
                  : html``}
                ${!this.network.getOutputLayer()
                  ? html`
                      <p>
                        ${msg(
                          'You currently do not have an output layer. Drag one onto the canvas!',
                        )}
                      </p>
                    `
                  : html``}
              `
            : html``}
          ${!this.modelConf.model &&
          (this.editable || this.settings.mayChangeLayerConnections)
            ? html`
                <p>
                  ${msg(
                    'Always make sure to connect your layers such that there is a path from your input layer(s) to your output layer! Therefore select a layer in the canvas and select its incoming or outgoing connections',
                  )}
                </p>
              `
            : html``}
        </div>
      </c-card>
    `
  }
}