Hugging Face's logo

Spaces:
iyadh01
/
ClinDoc_CDSS
Sleeping

App Files Community
ClinDoc_CDSS
File size: 4,784 Bytes
764531e
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
// DocumentPanel.jsx
import { useRef, forwardRef, useImperativeHandle } from 'react'

const DocumentPanel = forwardRef(function DocumentPanel({
  text,
  documentType,
  onDocumentChange,
  onDocumentTypeChange,
  onStartAnalysis,
  onDownload,
  onClear,
  loading,
  sessionId,
}, ref) {

  const textareaRef = useRef(null)

  useImperativeHandle(ref, () => ({
    focus() {
      textareaRef.current?.scrollIntoView({ behavior: 'smooth' })
      setTimeout(() => textareaRef.current?.focus(), 400)
    }
  }))

  function handleFileUpload(e) {
    const file = e.target.files[0]
    if (!file) return
    const reader = new FileReader()
    reader.onload = (ev) => onDocumentChange(ev.target.result)
    reader.readAsText(file)
    e.target.value = ''
  }

  return (
    <div style={s.panel}>
      <div style={s.header}>
        <span style={s.label}>Dokument</span>
      </div>

      <div style={s.body}>

        <div style={s.row}>
          <span style={s.rowLabel}>Dokumenttyp</span>
          <select
            style={s.select}
            value={documentType}
            onChange={e => onDocumentTypeChange(e.target.value)}
          >
            <option>Arztbrief</option>
            <option>Befund</option>
            <option>Entlassungsbrief</option>
            <option>Laborwerte</option>
          </select>
        </div>

        <textarea
          ref={textareaRef}
          style={s.textarea}
          placeholder="Klinischen Text hier einfügen…"
          value={text}
          onChange={e => onDocumentChange(e.target.value)}
        />

        <div style={s.hint}>
          Die KI-generierten Inhalte können Fehler enthalten und dienen der Unterstützung klinischer Entscheidungsfindung, nicht deren Ersatz. Ärztinnen und Ärzte sollten alle Informationen prüfen und bei der Entscheidungsfindung ihr eigenes klinisches Urteilsvermögen anwenden.
        </div>

        <input
          type="file"
          id="file-input"
          accept=".txt"
          style={{ display: 'none' }}
          onChange={handleFileUpload}
        />

        <div style={s.actions}>
          <button
            style={{ ...s.btnPrimary, opacity: loading || !text.trim() ? 0.6 : 1 }}
            disabled={!!loading || !text.trim()}
            onClick={onStartAnalysis}
          >
            {loading ? 'Läuft…' : 'Analyse starten'}
          </button>
          <button
            style={s.btnSecondary}
            onClick={() => document.getElementById('file-input').click()}
          >
            Dokument hochladen (.txt)
          </button>
          <button
            style={{ ...s.btnSecondary, opacity: !sessionId ? 0.5 : 1 }}
            disabled={!sessionId}
            onClick={onDownload}
          >
            Sitzung speichern
          </button>
          <button
            style={s.btnDanger}
            onClick={onClear}
          >
            Sitzung löschen
          </button>
        </div>

      </div>
    </div>
  )
})

export default DocumentPanel

const s = {
panel: { 
  width:'44%', 
  flexShrink:0, 
  background:'#fff', 
  borderRight:'0.5px solid #E2E0D8', 
  display:'flex', 
  flexDirection:'column', 
  overflow:'hidden',
  height: '100%', 
},
  header:      { padding:'12px 16px', borderBottom:'0.5px solid #E2E0D8', flexShrink:0 },
  label:       { fontSize:11, fontWeight:500, letterSpacing:'0.05em', textTransform:'uppercase', color:'#6B6960' },
  body:        { flex:1, overflowY:'auto', padding:16, display:'flex', flexDirection:'column', gap:12 },
  row:         { display:'flex', alignItems:'center', gap:8 },
  rowLabel:    { fontSize:12, color:'#6B6960', flexShrink:0 },
  select:      { flex:1, fontSize:12, padding:'5px 8px', borderRadius:6, border:'0.5px solid #C8C6BC', background:'#F7F6F3', color:'#1A1916' },
  textarea:    { width:'100%', minHeight:320, fontFamily:"'IBM Plex Sans', system-ui, sans-serif", fontSize:13, lineHeight:1.8, padding:12, borderRadius:8, border:'0.5px solid #C8C6BC', background:'#F7F6F3', color:'#1A1916', resize:'vertical' },
  hint:        { fontSize:11, color:'#A09D94', fontStyle:'italic', lineHeight:1.6 },
  actions:     { display:'flex', flexDirection:'column', gap:8 },
  btnPrimary:  { fontFamily:'inherit', fontSize:12, padding:'7px 14px', borderRadius:6, border:'0.5px solid #1A1916', background:'#1A1916', color:'#fff', cursor:'pointer', width:'100%' },
  btnSecondary:{ fontFamily:'inherit', fontSize:12, padding:'7px 14px', borderRadius:6, border:'0.5px solid #C8C6BC', background:'#F7F6F3', color:'#1A1916', cursor:'pointer', width:'100%' },
  btnDanger:   { fontFamily:'inherit', fontSize:12, padding:'7px 14px', borderRadius:6, border:'0.5px solid #FECACA', background:'transparent', color:'#B91C1C', cursor:'pointer', width:'100%' },
}